enable dropdown on checkbox checked not working… Dropdown is not getting enabled

I am trying to enable dropdown when the checkbox is checked. But when I do so… It didn’t working. Pls help me out here. 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

If you are using jquery 3.2.1 then your code must work.

Check once

1) You don’t have error in other js code(check console for error)

2) Make sure id must be unique so you must have onstage and occupation only one time in document

 $(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 as per your comment you are using bootstrap multiselect So you need to enable and disable multiselect attribute chcgae your code like this:

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