如果有人单击“以上所有复选框”中的任何一个,如何禁用以上所有复选框选项?

时间:2019-06-05 09:31:15

标签: javascript jquery html css

我浏览了一些网站,该网站的复选框选项为

家庭:妻子丈夫儿子女儿无。 如果有人没有选择任何选项,那么其余所有选项都将被禁用

2 个答案:

答案 0 :(得分:0)

请使用此代码,希望对您有帮助。

谢谢

  <input type="checkbox" name="check" value="father" class="group1">Father
    <input type="checkbox" name="check" value="mother" class="group1">mother
    <input type="checkbox" name="check" value="son & doughter" class="group1">son & doughter
    <input type="checkbox" name="check" value="none" id="none" class="group1">none

 $(function(){
 $("#none").on("click",function(){
    if (this.checked) {
        $("input.group1").attr("disabled", true);
    }else{
        $("input.group1").attr("disabled", false);
    }
 });
});

答案 1 :(得分:0)

"use strict";
console.clear();

{
  document.addEventListener('click', e => {
    const t = e.target
    if (t.nodeName.toLowerCase() == 'input' && t.type == 'checkbox' && t.dataset.trigger && t.dataset.trigger == 'none') {
      Array.from(t.form[t.name]).filter(el => el != t).forEach(el => el.disabled = t.checked)
    }
  })
}
input:disabled + label {
  color: lightgray;
}
<form id="my-form">
  <input type="checkbox" id="my-form-relatives-wife" name="relatives">
  <label for="my-form-relatives-wife">Wife</label>
  <input type="checkbox" id="my-form-relatives-husband" name="relatives">
  <label for="my-form-relatives-husband">Husband</label>
  <input type="checkbox" id="my-form-relatives-son" name="relatives">
  <label for="my-form-relatives-son">Son</label>
  <input type="checkbox" id="my-form-relatives-daughter" name="relatives">
  <label for="my-form-relatives-daughter">Daughter</label>
  <input type="checkbox" id="my-form-relatives-none" name="relatives" data-trigger="none">
  <label for="my-form-relatives-none">None</label>
</form>

这是向后兼容的版本

"use strict";
console.clear();

{
  document.addEventListener('click', function(e) {
    var t = e.target
    if (t.nodeName.toLowerCase() == 'input' && t.type == 'checkbox' && t.dataset.trigger && t.dataset.trigger == 'none') {
    Array.prototype.filter.call(t.form[t.name], function(el) { return el != t }).forEach(function(el) { return el.disabled = t.checked})
    }
  })
}
input:disabled + label {
  color: lightgray;
}
<form id="my-form">
  <input type="checkbox" id="my-form-relatives-wife" name="relatives">
  <label for="my-form-relatives-wife">Wife</label>
  <input type="checkbox" id="my-form-relatives-husband" name="relatives">
  <label for="my-form-relatives-husband">Husband</label>
  <input type="checkbox" id="my-form-relatives-son" name="relatives">
  <label for="my-form-relatives-son">Son</label>
  <input type="checkbox" id="my-form-relatives-daughter" name="relatives">
  <label for="my-form-relatives-daughter">Daughter</label>
  <input type="checkbox" id="my-form-relatives-none" name="relatives" data-trigger="none">
  <label for="my-form-relatives-none">None</label>
</form>