チェックボックスを有効にするチェックボックスがオンになっていません...ドロップダウンが有効になっていません。

Question

チェックボックスをオンにすると、ドロップダウンを有効にしようとしています。しかし、私がそうするとき...それは働かなかった。 Plsはここで私を助けます。 HTML：

   <label class="checkbox-inline"> 
       <input type="checkbox" value="" id="onstage">On Stage 
       </label> 


         <div class="col-md-9"> 
         <select name="occupation" id="occupation" multiple="multiple" disabled="disabled"> 
         <option value="Actor">Actor</option> 
         <option value="Supervisor">Supervisor</option> 
         <option value="Extra">Extra</option> 
        </select> 

はJQuery：

<script type="text/javascript"> 
$(function(){ 

      $("#onstage").click(function(){ 

       if($(this).is(":checked")){ 
        $("#occupation").removeAttr("disabled"); 
        $("#occupation").focus(); 
       } else { 
        $("#occupation").attr("disabled", "disabled"); 
       } 
      }); 
     }); 
    </script> 

Answer 1

：また、あなたはこのようにあなたのコードを簡素化することができます。あなたがjsの他のコードに誤りがない一度

チェック）（エラーのコンソールを確認してください）

2）あなたはonstageとoccupation一度だけを持っている必要がありますので、必ずIDは一意である必要がありますしてください文書中の

$(function(){ 
 

 
      $("#onstage").click(function(){ 
 

 
       if($(this).is(":checked")){ 
 
        $("#occupation").removeAttr("disabled"); 
 
        $("#occupation").focus(); 
 
       } else { 
 
        $("#occupation").attr("disabled", "disabled"); 
 
       } 
 
      }); 
 
     });

<label class="checkbox-inline"> 
 
    <input type="checkbox" value="" id="onstage">On Stage 
 
</label> 
 

 

 
<div class="col-md-9"> 
 
<select name="occupation" id="occupation" multiple="multiple" disabled="disabled"> 
 
    <option value="Actor">Actor</option> 
 
    <option value="Supervisor">Supervisor</option> 
 
    <option value="Extra">Extra</option> 
 
</select> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

EDITあなたがそうbootstrap multiselectを使用しているあなたのコメントごとにあなたはmultiselectは、このようなあなたのコードchcgae属性有効および無効にする必要があります。

$("#onstage").click(function(){ 
if($(this).is(":checked")){ 
     $("#occupation").multiselect('enable');      
} else { 
     $("#occupation").multiselect('disable'); 
} 
}); 

Answer 2

あなたはdisabledプロパティ、if you're using jQuery 1.6+を設定するためのpropの代わりattrを使用する必要があります。あなたはjqueryの3.2.1を使用している場合は、あなたのコードが動作する必要があります

$("#onstage").change(function(){ 
    $("#occupation").prop("disabled", !$(this).is(":checked")); 

    if($(this).is(":checked")){ 
     $("#occupation").focus(); 
    } 
}); 

Answer 3

使用$（「＃占領を」）のattr（「無効」、「真"）;あなたがチェックを外し、チェックボックスの時に選択された値を削除したい場合は、他のブロックに

<script type="text/javascript"> 
$(function(){ 

      $("#onstage").click(function(){debugger; 

       if($(this).is(":checked")){ 
        $("#occupation").removeAttr("disabled"); 
        $("#occupation").focus(); 
       } else { 
        $("#occupation").attr("disabled", "true"); 
       } 
      }); 
     }); 
    </script> 

Answer 4

は、あなたがこれを使用することができます：jqueryのの

$("#onstage").click(function(){ 
 
    $("#occupation").prop("disabled", !$(this).is(":checked")).val(''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="checkbox-inline"> 
 
    <input type="checkbox" value="" id="onstage"/> On Stage 
 
</label> 
 
<div class="col-md-9"> 
 
    <select name="occupation" id="occupation" multiple="multiple" disabled="disabled"> 
 
     <option value="Actor">Actor</option> 
 
     <option value="Supervisor">Supervisor</option> 
 
     <option value="Extra">Extra</option> 
 
    </select> 
 
</div>