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
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>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
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>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> 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>