Disable select if checkbox checked jquery

Question

I have a html script where there is a multiple select I want to be "disabled" when I check a checkbox field.

Example:

<p><input type="checkbox" id="chk_select" name="check" value="ok" "/> deselect</p>

<p>
<select multiple="multiple" name="candidato[]" id="soci" required>
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
</p>

Is it possible to disable the multiple select with jquery?

Thank You! Giuseppe

score 1 · Accepted Answer · answered Mar 10 '20 at 07:29

Try this one.

function checkstate() {
    document.getElementById('soci').disabled = document.getElementById('chk_select').checked;
}

<p><input type="checkbox" id="chk_select" name="check" value="ok" onclick="checkstate()"> deselect</p>

<p>
<select multiple="multiple" name="candidato[]" id="soci" required>
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
</p>

Leon Vuković · Answer 2 · 2020-03-10T07:17:01.520

0

You can find how to check if the checkbox is checked here: Check if checkbox is checked with jQuery

Than you can find how to disable select here: jQuery - disable selected options

Try to toggle a class on the select if the checkbox is checked.

Also, you can find the working example here: disable select if checkbox is checked

edited Mar 10 '20 at 07:17

answered Mar 10 '20 at 07:08

Leon Vuković

489
3
16

score 0 · Answer 3 · answered Mar 10 '20 at 07:26

This will do the trick

$('input[type="checkbox"]').change(function(){
if($(this).is(':checked')){
$('select').attr('disabled','disabled')
}else{
$('select').removeAttr('disabled','disabled')
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="checkbox" id="chk_select" name="check" value="ok" "/> deselect</p>

<p>
<select multiple="multiple" name="candidato[]" id="soci" required >
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
</p>

Carsten Massmann · Answer 4 · 2020-03-10T21:59:55.977

The following is a jQuery based solution, but it can just as easily be done with vanilla JS on modern browsers:

$('#chk_select').change(function(){
  $('#soci').attr('disabled',this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label><input type="checkbox" id="chk_select" name="check" value="ok"/> deselect</label>
<p> <select multiple="multiple" name="candidato[]" id="soci" required>
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select> </p>

Vanilla JS solution for all browsers apart from Internet Explorer:

function qs(s){return document.querySelector(s);}
qs('#chk_select').addEventListener('change',function(){
 qs('#soci').disabled=this.checked;});

<label><input type="checkbox" id="chk_select" name="check" value="ok"/> deselect</label>
<p> <select multiple="multiple" name="candidato[]" id="soci" required>
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select> </p>

score 0 · Answer 5 · answered Mar 10 '20 at 07:41

Hope this helpful...

view

 <p>
    <input type="checkbox" id="chk_select" name="check" value="ok" onclick="myFunction()"/> 
 deselect
    </p>

script

  <script>
    function myFunction() {
      var checkBox = document.getElementById("myCheck");
      if (checkBox.checked == true){
        document.getElementById('soci').disabled = true;
      } else {
        document.getElementById('soci').disabled = false;
      }
    }
    </script>

Disable select if checkbox checked jquery

5 Answers5