如果复选框选中jquery，则禁用选择答案

【问题标题】：Disable select if checkbox checked jquery如果复选框选中jquery，则禁用选择
【发布时间】：2020-06-22 01:34:17
【问题描述】：

我有一个 html 脚本，其中有一个多项选择，当我选中复选框字段时，我希望“禁用”。

例子：

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

是否可以使用 jquery 禁用多选？

谢谢！朱塞佩

【问题讨论】：

标签： javascript jquery select checkbox

【解决方案1】：

试试这个。

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>

【讨论】：

【解决方案2】：

您可以在此处找到如何检查复选框是否被选中： Check if checkbox is checked with jQuery

您可以在此处找到如何禁用选择： jQuery - disable selected options

如果复选框被选中，请尝试在 select 上切换一个类。

此外，您可以在此处找到工作示例： disable select if checkbox is checked

【讨论】：

【解决方案3】：

这样就可以了

$('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>

【讨论】：

【解决方案4】：

希望对您有所帮助...

查看

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

脚本

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

【讨论】：

【解决方案5】：

以下是基于 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>

适用于除 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>

【讨论】：