[英]Disable select if checkbox checked jquery
I have a html script where there is a multiple select I want to be "disabled" when I check a checkbox field.我有一个 html 脚本,其中有多个选择,当我选中复选框字段时,我希望“禁用”。
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?是否可以使用 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您可以在此处找到如何检查复选框是否已选中: Check if checkbox is checked with jQuery
Than you can find how to disable select here: jQuery - disable selected options您可以在这里找到如何禁用选择: jQuery - 禁用选定的选项
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>
The following is a jQuery based solution, but it can just as easily be done with vanilla JS on modern browsers:以下是一个基于 jQuery 的解决方案,但它可以在现代浏览器上使用 vanilla JS 轻松完成:
$('#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:适用于除 Internet Explorer 之外的所有浏览器的 Vanilla JS 解决方案:
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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.