少なくとも1つの入力がオリジナルでない場合、どのようにリンクにCSSを適用できますか？すべての入力がオリジナルの場合、その変更を取り消しますか？

Question

私のページには、チェックボックス、ラジオボタン、テキストフィールドがあります。彼らはすべて、idの最後に「_boom」を付け加えています。これらの入力のいずれかが元の値ではないかどうかを検出したい場合は、そのページの「保存」ボタンにCSSを適用します。ユーザーが変更を元に戻し、すべての入力が元の値になっている場合は、CSSを元に戻します。

私は以下のコードを締結しました。しかし、3つのチェックボックスをチェックしてみましょう。最初のボックスをチェックすると、CSSが変更されます。良い！私は2番目と3番目のボックスをチェックします。 CSSは同じままです。良い！しかし、ボックスの1つを選択解除すると、CSSが元に戻ります。悪い！すべての変更を元に戻す場合にのみ、CSSを元に戻す必要があります。

$('[id*="_boom"]').change(function() { 
 
     var sType = $(this).prop('type'); //get the type of attribute we're dealing with 
 
     if(sType === "checkbox" || sType === "radio"){ //checkbox or radio type 
 
      var originalCheckedState = $(this).prop("defaultChecked"); 
 
      var currentCheckedState = $(this).prop("checked"); 
 

 
      if(currentCheckedState !== originalCheckedState){ 
 
       $("a#save").css("color","#CCCCCC"); 
 
      } 
 
      else { 
 
       $("a#save").css("color","black"); 
 
      } 
 
     } 
 

 
     if(sType === "text"){ //text type 
 
      var originalValue = $(this).prop("defaultValue"); 
 
      var currentValue = $(this).val(); 
 

 
      if(currentValue !== originalValue){ 
 
       $("a#save").css("color","#CCCCCC"); 
 
      } 
 
      else { 
 
       $("a#save").css("color","black"); 
 
      } 
 
     } 
 

 
    });

#save { 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="check_boom" /> 
 
<input type="checkbox" id="check1_boom" /> 
 
<input type="checkbox" id="check2_boom" /> 
 
<input type="radio" id="radio_boom" /> 
 
<input type="text" defaultValue="test" id="text_boom" /> 
 
<input type="text" defaultValue="test" id="text2_boom" /> 
 
<a href="http://www.google.com" id="save">Save</a>

Answer 1

コードをきれいにして標準化するために、多くの可能性のある改善がコードにあります。あなたはidに頼るのではなく、classの属性とすべてを考慮する必要があります...しかし、私はあなたのコードを改良しません。既存のコードの解決策を次に示します。

アイデアはすべてのフォーム要素をループし、少なくとも1つの要素がデフォルト値と異なる場合は、フラグを設定してループから出てきます。

最後に、そのフラグをチェックし、それに応じてCSSを設定します。

このため、私はあなたの要素をフォームform1に囲んでいます。

$("#form1 :input").change(function() { 
     var changed = false; 
     formElems = $("#form1 :input"); 

     for(i=0;i<formElems.length; i++){ 
     var sType = $(formElems[i]).prop("type"); 
      if(sType === "checkbox" || sType === "radio"){ 
       if($(formElems[i]).prop("defaultChecked") !== $(formElems[i]).prop("checked")){ 
       changed = true; 
       break; 
      } 
      }else if(sType === "text"){ 
       if($(formElems[i]).prop("defaultValue") !== $(formElems[i]).val()){ 
       changed = true; 
       break; 
      } 
      } 
     } 

    if(changed){ 
    $("a#save").css("color","#CCCCCC"); 
    }else{ 
    $("a#save").css("color","black"); 
    } 
}); 

そしてここであなたのフォームは、私が独自のHTMLを生成し、サードパーティのツールを使って働いているので、残念ながら私は、フォーム要素のアプローチを使用することはできません

<form id="form1"> 
<input type="checkbox" id="check_boom" /> 
<input type="checkbox" id="check1_boom" /> 
<input type="checkbox" id="check2_boom" /> 
<input type="radio" id="radio_boom" /> 
<input type="text" defaultValue="test" id="text_boom" /> 
<input type="text" defaultValue="test" id="text2_boom" /> 
<a href="http://www.google.com" id="save">Save</a> 
</form> 

Answer 2

問題は、そのうちの一つが、元の値に変更されたときに、ある、それは変化がないという意味ではありません。
したがって、あなたのelseコードブロックで、すべての入力をチェックして、すべてが元の値であれば、ボタンから 'save'クラスを削除してください。

var isChanged = function ($element) { 
    var sType = $element.prop('type'); 
    if (sType === "checkbox" || sType === "radio") { 
     var originalCheckedState = $element.prop("defaultChecked"); 
     var currentCheckedState = $element.prop("checked"); 
     if (currentCheckedState !== originalCheckedState) { 
      return true; 
     } else { 
      return false; 
     } 
    } else if(sType === "text") { 
     var originalValue = $element.prop("defaultValue"); 
     var currentValue = $element.val(); 
     if (currentValue !== originalValue) { 
      return true; 
     } else { 
      return false; 
     } 
    } 
}; 
var $inputs = $('[id*="_boom"]'); 
var isAnyChanged = function() { 
    $inputs.each(function() { 
     if (isChanged($(this))) { 
      return true; 
     } 
    }); 
    return false; 
}; 
$inputs.change(function() { 
    if (isChanged($(this))) { 
     $("a#save").css("color","#CCCCCC"); 
    } else if (!isAnyChanged()) { 
     $("a#save").css("color","black"); 
    } 
});