ドロップダウンの変更時に同じクラスに属するすべてのチェックボックスをオフにするにはどうすればよいですか？

Question

として、私は、ドロップダウンリストの変更を処理するための機能を持っています。今、私がチェックしたときに

<input type="checkbox" class="chkBox" >

：

$('#dropDownChoice').change(function() { 
    debugger; 
    var choice= $('#dropDownChoice option:selected').text(); 
    //code to display elements: the divisions that contain the checkboxes 
    }); 


$(".chkBox").change(function() { 
      debugger; 
      if (this.checked) { 
       $("." + this.className).not(this).prop("disabled", true); 
       $(this).closest('div').find(".save").show(); 
       $(this).closest('div').find(':input[type="number"]').prop('disabled', false); 
      } 
      else { 
       //opposite of that in if - block 
      } 

     }); 

そして、チェックボックス（数6）として宣言チェックボックスをオンにすると、関連するすべてのフィールドが表示され、その他のフィールドは無効になります。

私の問題は、ドロップダウンが変更されたとき、つまり別のオプションが選択されても、以前に選択されたチェックボックスと関連するフィールドが有効になり、その他のチェックボックスはすべて非表示になります。

は、私が使用してみました：

$('.chkBox').show(); 
$('.chkBox').removeAttr('checked'); 

そしてまた、私は$('#dropDownChoice').change(function(){} 内部から呼び出されるカスタム関数を、しかし、これは動作しません。

function ResetChkBox() { 
       $('.chkBox').prop('checked', false); 
       $(this).closest('div').find(".save").hide(); 
} 

編集：

HTML：

<div id= "main"> 
    <div id="div1" style="padding-left: 20px;"> 
      <input type="checkbox" class="chkBox" > 
      <input type="number" id="len1" disabled = "disabled"/> 
      <a href='#' id="btn-save" class="glyphicon glyphicon-floppy-save save" style="display: none;" ></a> 
    </div> 
    //other divs each with numeric input fields and a checkbox, all checkboxes of class `chkBox` 
</div> 

問題の説明：

私は、ドロップダウン、それ以上に変更されたときこれらのチェックボックスを表示する必要があります、私は達成しました。

今すぐ。 1つのチェックボックスを選択し、フィールドに値を入力して[保存]をクリックすると、チェックボックスは消えます。これもやっている。

ここで、ドロップダウンから何かを選択すると、チェックボックスが再び表示され、チェックを外す必要があります。これは私の問題があるところです。 2番目のチェックボックスを選択して値を保存した場合、ドロップダウンが変更されたときに、2番目のチェックボックスが選択され、他のすべてが非表示になり、対応するフィールドが無効になります。

Answer 1

$(".chkBox").change(function() { 
      debugger; 
      if (this.checked) { 
       $(".chkBox").prop("checked", false); 
       $(".chkBox").prop("disabled", true); 
       $(this).prop("disabled",false); 
       $(this).prop("checked",true); 
       $(this).closest('div').find(".save").show(); 
       $(this).closest('div').find(':input[type="number"]').prop('disabled', false); 
      } 
      else { 
       //opposite of that in if - block 
      } 

     }); 

Answer 2

これが必要な場合はわかりません。

$(".chkBox").change(function() { 
 
      $("." + this.className).not(this).prop("disabled", $(this).is(':checked')); 
 
      $(this).closest('div').find(':input[type="number"]').prop('disabled', !$(this).is(':checked')); 
 
      $(".save").hide(); 
 
      $(this).closest('div').find(".save").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id= "main"> 
 
    <div id="div1" style="padding-left: 20px;"> 
 
      <input type="checkbox" class="chkBox" > 
 
      <input type="number" id="len1" disabled = "disabled"/> 
 
      <a href='#' id="btn-save" class="glyphicon glyphicon-floppy-save save" style="display: none;" >div1</a> 
 
    </div> 
 
    <div id="div2" style="padding-left: 20px;"> 
 
      <input type="checkbox" class="chkBox" > 
 
      <input type="number" id="len2" disabled = "disabled"/> 
 
      <a href='#' id="btn-save2" class="glyphicon glyphicon-floppy-save save" style="display: none;" >div2</a> 
 
    </div> 
 
    <div id="div3" style="padding-left: 20px;"> 
 
      <input type="checkbox" class="chkBox" > 
 
      <input type="number" id="len3" disabled = "disabled"/> 
 
      <a href='#' id="btn-save3" class="glyphicon glyphicon-floppy-save save" style="display: none;" >div3</a> 
 
    </div> 
 
    
 
</div>