如果復選框選中jquery，則禁用選擇

Question

我有一個 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 禁用多選？

謝謝你！ 朱塞佩

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

Answer 2

您可以在此處找到如何檢查復選框是否已選中： Check if checkbox is checked with jQuery

您可以在這里找到如何禁用選擇： jQuery - 禁用選定的選項

如果選中了復選框，請嘗試在選擇上切換類。

此外，您可以在此處找到工作示例： 如果選中復選框，則禁用選擇

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

Answer 4

以下是一個基於 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>

Answer 5

希望這有幫助...

看法

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