Selected Checkbox 禁用另一个复选框的选择答案

【问题标题】：Selected Checkbox disables the selection of another checkboxSelected Checkbox 禁用另一个复选框的选择
【发布时间】：2014-03-27 17:39:00
【问题描述】：

我有理由使用复选框而不是单选按钮，所以请不要建议我使用单选按钮但需要复制功能。但是，当我选择 Yes 复选框时，它会出于某种原因禁用 No 复选框。当否定否时，我想隐藏DIV并取消选择是，而当我选择是时，我想显示DIV和取消选中否。选中“是”时，我可以选择“否”的唯一方法是取消选中它。

工作演示Here

JS Fiddle 不工作 Here

Javascript

function injure() {
     if (document.getElementById("f2").checked == true) {
         document.getElementById("LocFall").style.display="block";
         document.getElementById("f1").checked = false;
     } else {
         if (document.getElementById("f1").checked == true) {
             document.getElementById("LocFall").style.display="none";
             document.getElementById("f2").checked = false;
         }
     }
}

CSS

#LocFall {
    display:none;   
}

HTML

    <input type="checkbox" id="f1" name=""  onclick="injure();">
    <label for="f1"> No </label><BR>
    <input type="checkbox" id="f2" name=""  onclick="injure();">
    <label for="f2"> Yes</label><BR>

    <div id="LocFall">
        Show some stuff
    </div>

【问题讨论】：

我对您选择复选框而不是单选按钮的原因很感兴趣！

标签： javascript html css checkbox

【解决方案1】：

http://jsfiddle.net/6NN6s/14/

<input type="checkbox" id="f1" name="same" onclick="injure(this);" />
<label for="f1">No</label>
<BR>
<input type="checkbox" id="f2" name="same" onclick="injure(this);" />
<label for="f2">Yes</label>
<BR>
<div id="LocFall">Show some stuff</div>


function injure(cmb) {
    if (cmb.checked) {
        if(cmb.id==="f2")
        {   document.getElementById("LocFall").style.display = "block";
             document.getElementById("f1").checked = false;
        }
        else
        {
            document.getElementById("LocFall").style.display = "none";
            document.getElementById("f2").checked = false;
        }
    }    
}

试试这个，可能是你需要的。

【讨论】：

太好了，我发现我必须将 HTML 函数更改为 onclick="injure(this);"谢谢。
现在如果 DIV 可见并且我想取消选中 Yes 或 id="f2" 我也想隐藏 DIV。

【解决方案2】：

在 Fiddle 中，将第二个下拉列表左侧的“onLoad”更改为“no wrap - in <head>”。

【讨论】：

什么？没有下拉列表。
这就是问题所在。 Here你有一个更新的小提琴选择了该选项和here更多信息

【解决方案3】：

将injure 拆分为不同的函数；如果您选择No，那么您不能选择Yes，因为您的函数设置方式 - 第一个条件将始终评估为true。

【讨论】：

【解决方案4】：

问题源于不知道函数内实际单击了哪个复选框。事实上，该函数只有两种不同的响应方式：一种是检查 f1，另一种是检查 f2。问题是实际上您要表示的可能状态更多。

状态 1：未检查，用户单击 f1 或 f2
状态 2：检查 f1，单击 f2
状态 3：检查 f2，单击 f1

您的代码可以很好地处理第一个状态，但无法正确处理第二个状态。如果您将代码分成两个单独的函数来处理每个框，那么您将拥有编写正确决策逻辑所需的所有信息。

还有点击同一个框的状态，但它们很简单，你的代码已经处理了它们。

【讨论】：

是的，我必须创建单独的函数。