チェックボックスをオンにするとドロップダウンを有効にします

Question

チェックボックスを使用してドロップダウンリストを有効または無効にしたいのですが、すべてのチェックボックスにドロップダウンがあります。 ドロップダウンはchecboxをチェックするたびに有効になっていますが、問題はすべてドロップダウンが有効になっていることです。 HERE

はMY HTML

@foreach($allergies as $aller) 
       <select name="tolerance[]" class="tol" id="tol" disabled> 
         <option value="Low">Low</option> 
         <option value="Medium">Medium</option> 
         <option value="High">High</option> 
       </select> 
         <input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="{{$aller->allergen_id}}"> 
         {{ $aller->allergen_name}}<br> 
       @endforeach 

そして、ここで私のjQueryのです

<script> 
    $(document).ready(function(){ 
    $('.tol').attr('disabled', 'disabled'); 
    }); 

    $(document).ready(function(){ 

     var $checkBox = $('.allergies'), 
     $select = $('.tol'); 

    $checkBox.on('change',function(e){ 
     if ($(this).is(':checked')){ 
      $select.removeAttr('disabled'); 
     }else{ 
      $select.attr('disabled','disabled'); 
     } 
    }); 

    }); 
</script> 

Answer 1

$(document).ready(function() { 
 
    $('.tol').attr('disabled', 'disabled'); 
 

 
    var $checkBox = $('.allergies'); 
 

 
    $checkBox.on('change', function(e) { 
 
    //get the previous element to us, which is the select 
 
    var $select = $(this).prev(); 
 
    
 
    if (this.checked) { 
 
     $select.removeAttr('disabled'); 
 
    } else { 
 
     $select.attr('disabled', 'disabled'); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="tolerance[]" class="tol" disabled> 
 
         <option value="Low">Low</option> 
 
         <option value="Medium">Medium</option> 
 
         <option value="High">High</option> 
 
       </select> 
 
<input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="Pollen">Pollen<br> 
 

 
<select name="tolerance[]" class="tol" disabled> 
 
         <option value="Low">Low</option> 
 
         <option value="Medium">Medium</option> 
 
         <option value="High">High</option> 
 
       </select> 
 
<input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="Glue">Glue<br>

Answer 2

ISこのライン：$select = $('.tol');戻り、すべてのドロップダウンフィールド、その理由は、すべてのドロップダウンが表示されます。

私はあなたが最初にこのようなあなたのHTML構造を変更すべきだと思う

：

<div class="field"> 
<select name="tolerance[]" class="tol" id="tol" disabled> 
    <option value="Low">Low</option> 
    <option value="Medium">Medium</option> 
    <option value="High">High</option> 
</select> 
<input type="checkbox" class="allergies" id="allergies" name="allergen[]" value="{{$aller->allergen_id}}"> 
<div> 

をそして、あなたは正しく ".tol" を識別することができます

$checkBox.on('change',function(e){ 
    var tol = this.parent('.field').find('.tol'); 
    if ($(this).is(':checked')){ 
     tol.removeAttr('disabled'); 
    }else{ 
     tol.attr('disabled','disabled'); 
    } 
}); 

Answer 3

あなたは複数のHTML idを作成するべきではありません同じ値を持つ属性。その代わりに、すべての選択ボックスにallergen_idを追加して一意のIDが設定されていることを確認してください。

こうすれば、jQueryで簡単に参照して操作することができます。その後、HTML作成の自由度が増します（これまでの答えでは、チェックボックス要素をSelect文の直後に置く必要があります）。あなたのHTMLは次のように変更することができます

：

@foreach($allergies as $aller) 
    <select name="tolerance[]" class="tol" id="tol_{{$aller->allergen_id}}" disabled="disabled"> 
     <option value="Low">Low</option> 
     <option value="Medium">Medium</option> 
     <option value="High">High</option> 
    </select> 
    <input type="checkbox" class="allergies" id="allergies_{{$aller->allergen_id}}" name="allergen[]" value="{{$aller->allergen_id}}"> 
    {{ $aller->allergen_name}} 
    <br> 
@endforeach 

そしてあなたのjQueryのに変更します：あなたが見ることができるように

$(document).ready(function(){ 
    $('.tol').attr('disabled', 'disabled'); 

    var $checkBox = $('.allergies'); 

    $checkBox.on('change',function(e){ 
     if ($(this).is(':checked')){ 
      $("#tol_" + $(this).attr("value")).removeAttr('disabled'); 
     }else{ 
      $("#tol_" + $(this).attr("value")).attr('disabled','disabled'); 
     } 
    }); 
}); 

、すべてのselectのIDはtol_{{id}}にtolから変更しました。各チェックボックスの値にはこのIDが格納されているため、チェックされているチェックボックスのIDを使用して、正しいSELECT文を参照することができます。