复选框选中勾选功能答案

【问题标题】：Checkbox selected tick function复选框选中勾选功能
【发布时间】：2020-12-10 02:21:39
【问题描述】：

我有 5 个复选框，我想勾选 1 个复选框，然后其他 4 个复选框将无法勾选，如果我取消勾选 1 个复选框，其他 4 个复选框将能够勾选。希望有人可以根据我下面的编码指导我如何解决它：

<div class="form-group" id="taraf_keselamatan_fail">
<label for="cp1" class="control-label col-lg-4">Taraf Keselamatan Fail:</label>
<div class="col-lg-3">
<input type="checkbox" name="rahsia_besar" id="rahsia_besar" value="1"><b> Rahsia Besar</b></input>&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="rahsia" id="rahsia" value="1"><b> Rahsia</b></input>&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="sulit" id="sulit" value="1"><b> Sulit</b></input>&nbsp;&nbsp;&nbsp;<br>
<input type="checkbox" name="terhad" id="terhad" value="1"><b> Terhad</b></input>&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="terbuka" id="terbuka" value="1"><b> Terbuka</b></input>&nbsp;&nbsp;&nbsp;
</div>
</div>

现在我的输出结果如下图可以勾选所有复选框：

我的预期结果如下图示例，只需勾选复选框中的 1 个框即可。

这是我在 javascript 中尝试的编码，但它无法工作：

<script>
var form = document.getElementById("checkForm");
form.onclick = delegateFormClick;

addChangeHandlers(form);

function addChangeHandlers(form)
{
   for(var i=0;i<form.elements.length;i++)
   {
       var element = form.elements[i];
       if(element.tagName === "INPUT" && element.type === "checkbox")
       {
           if(!element.onchange)
           {
               element.onchange = checkBoxChanged;   
           }
       }
   }  
}

function delegateFormClick(evt)
{
    var target;
    if(!evt)
    {
        //Microsoft DOM
        target = window.event.srcElement;
    }else if(evt)
    {
        //w3c DOM 
        target = evt.target;
    }
    if(target.nodeType === 1 && target.tagName === "INPUT" && target.type === "checkbox")
    {
        if(target.checked)
        {
            disableCheckBoxes(target.id, document.getElementById("checkForm"));
        }else if(!target.checked)
        {
            enableCheckBoxes(document.getElementById("checkForm"));
        }  
    }
}

function checkBoxChanged()
{
    if(this.checked)
    {
       disableCheckBoxes(this.id, document.getElementById("checkForm")); 
    }else if(!this.checked)
    {
        enableCheckBoxes(document.getElementById("checkForm"));  
    }
}

function disableCheckBoxes(id, form)
{
    var blacklist = [];
    if(id)
    {
        switch(id)
        {
            case "rahsia_besar":
            blacklist = ["rahsia", "sulit","terhad","terbuka"];
            break;
            case "rahsia":
            blacklist = ["rahsia_besar", "sulit","terhad","terbuka"];
            break;
            case "sulit":
            blacklist = ["rahsia_besar", "rahsia","terhad","terbuka"];
            break;
            case "terhad":
            blacklist = ["rahsia_besar", "rahsia","sulit","terbuka"];
            break;
            case "terbuka":
            blacklist = ["rahsia_besar", "rahsia","sulit","terhad"];
            break;
        }   
    }else
    {
        throw new Error("id is needed to hard-wire input blacklist");   
    }
    for(var i=0;i<blacklist.length;i++)
    {
        var element = document.getElementById(blacklist[i]);
        if(element && element.nodeType === 1)
        {
            //check for element
            if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
            {
                element.disabled = "disabled";
            }
        }else if(!element || element.nodeType !== 1)
        {
            throw new Error("input blacklist item does not exist or is not an element");
        }
    }   
}

function enableCheckBoxes(form)
{
    for(var i=0;i<form.elements.length;i++)
    {
        var element = form.elements[i];
        if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
        {
            element.disabled = "";
        }
    }   
}


</script>

【问题讨论】：

你能告诉我们一些你迄今为止尝试过的代码吗？这感觉就像您只是在要求某人为您编写整个解决方案
请问您为什么尝试修改复选框以充当radio button 而不是使用单选按钮？
我已经更新了 javascript 的代码，请检查。谢谢。
@PiNetworkCrytocurrency ...有两种方法...一种完全覆盖您描述的用例，另一种几乎覆盖它，无需额外的脚本。看看我的答案。

标签： javascript html dom events checkbox

【解决方案1】：

预期的行为确实（几乎...参见EDIT）不需要任何形式的额外脚本，因为任何radio group 都可以免费获得这样的行为。 ..

// scripting is just for proofing the behavior of a radio group/collection

function logCurrentlyCheckedFailValue(evt) {
  if (evt.target.type === 'radio') {

    console.log(`radio name: ${ evt.target.name }\nradio value: ${ evt.target.value }`);
  }
}

function mainInit() {
  document
    .querySelector('#taraf_keselamatan_fail')
    .addEventListener('click', logCurrentlyCheckedFailValue)
}
mainInit();

.as-console-wrapper { max-height: 60%!important; }

<form>
  <fieldset class="form-group" id="taraf_keselamatan_fail">

    <legend class="control-label col-lg-4">Taraf Keselamatan Fail:</legend>
    <div class="col-lg-3">
      <label>
        <input type="radio" name="taraf_keselamatan_fail" value="rahsia_besar"/>
        <b>Rahsia Besar</b>
      </label>
      <label>
        <input type="radio" name="taraf_keselamatan_fail" value="rahsia"/>
        <b>Rahsia</b>
      </label>
      <label>
        <input type="radio" name="taraf_keselamatan_fail" value="sulit"/>
        <b>Sulit</b>
      </label>
      <label>
        <input type="radio" name="taraf_keselamatan_fail" value="terhad"/>
        <b>Terhad</b>
      </label>
      <label>
        <input type="radio" name="taraf_keselamatan_fail" value="terbuka"/>
        <b>Terbuka</b>
      </label>
    </div>

  </fieldset>
</form>

编辑

我想向 OP 道歉，因为我没有仔细阅读这个问题。 OP 的用例确实与广播组实际提供的不同。

我们开始...

function setControlStateViaBoundConfig(elm) {
  const config = this;
  if (elm !== config.ignore) {

    elm.checked = config.checked;
    elm.disabled = config.disabled;
  }
}
function toggleBehaviorOfFailureOptions(evt) {
  const targetElement = evt.target;

  if (targetElement.type === 'checkbox') {
    const isDisableOthers = targetElement.checked;

    evt.currentTarget // equals element with `id="taraf_keselamatan_fail"`
      .querySelectorAll('[type="checkbox"]')
      .forEach(setControlStateViaBoundConfig, {

        ignore: targetElement,
        checked: false,
        disabled: isDisableOthers,
      });
  }
}

function mainInit() {
  document
    .querySelector('#taraf_keselamatan_fail')
    .addEventListener('click', toggleBehaviorOfFailureOptions)
}
mainInit();

[type="checkbox"]:disabled + b { opacity: .4; }

.as-console-wrapper { max-height: 60%!important; }

<form>
  <fieldset class="form-group" id="taraf_keselamatan_fail">

    <legend class="control-label col-lg-4">Taraf Keselamatan Fail:</legend>
    <div class="col-lg-3">
      <label>
        <input type="checkbox" name="rahsia_besar" value="1"/>
        <b>Rahsia Besar</b>
      </label>
      <label>
        <input type="checkbox" name="rahsia" value="1"/>
        <b>Rahsia</b>
      </label>
      <label>
        <input type="checkbox" name="sulit" value="1"/>
        <b>Sulit</b>
      </label>
      <label>
        <input type="checkbox" name="terhad" value="1"/>
        <b>Terhad</b>
      </label>
      <label>
        <input type="checkbox" name="terbuka" value="1"/>
        <b>Terbuka</b>
      </label>
    </div>

  </fieldset>
</form>

【讨论】：

【解决方案2】：

我从您的代码提取中创建了一个Stackblitz，它正在运行，您能否检查一下这是否是您期望的解决方案？

【讨论】：