启用或禁用 html 中的复选框

Posted 2023-05-07

【中文标题】启用或禁用 html 中的复选框

【英文标题】：enable or disable checkbox in html

【发布时间】：2012-08-12 20:40:49

【问题描述】：

我想根据条件启用或禁用表格行中的复选框。

代码 -

<td><input type="checkbox" name="repriseCheckBox" disabled=checkStat == 1 ? true : false/></td>

如果 checkStat = 1，需要禁用复选框，否则保持启用。

它不工作。它禁用所有复选框。 有什么建议吗？

【问题讨论】：

checkStat是什么变量？它来自哪里？

@Pekka - checkStat 是 jsp 变量，在同一个 jsp 中声明

Correct value for disabled attribute 的可能重复项

【参考方案1】：

如果您指定disabled 属性，那么您给它的值必须是disabled。 （在 html 5 中，您可以省略除属性值之外的所有内容。在 HTML 4 中，您可以省略除属性名称之外的所有内容。）

如果您不想禁用该控件，则根本不要指定该属性。

已禁用：

<input type="checkbox" disabled>
<input type="checkbox" disabled="disabled">

启用：

<input type="checkbox">

无效（但通常错误恢复被视为禁用）：

<input type="checkbox" disabled="1">
<input type="checkbox" disabled="true">
<input type="checkbox" disabled="false">

所以，在不知道您的模板语言的情况下，我猜您正在寻找：

<td><input type="checkbox" name="repriseCheckBox" checkStat == 1 ? disabled : /></td>

【讨论】：

好答案，谢谢

【参考方案2】：

<input type="checkbox" value="" ng-model="t.IsPullPoint" onclick="return false;" onkeydown="return false;"><span class="cr"></span></label>

【讨论】：

也许让 OP 知道你为什么给出你所做的答案，即改进了什么或为什么你的代码可以工作。给出一个简短的解释意味着 OP 可以完全理解并帮助下一个人或 SO 社区。​​span>

现在我找到了一个最好的解决方案...

onclick="return false;" onkeydown="return false;" >

【参考方案3】：

HTML 解析器根本不会像这样解释内联的 javascript。

你可以这样做：

<td><input type="checkbox" id="repriseCheckBox" name="repriseCheckBox"/></td>

<script>document.getElementById("repriseCheckBox").disabled=checkStat == 1 ? true : false;</script>

【讨论】：

没有getElementByName 方法。它是一个复数方法，返回一个节点列表，而不是一个元素。

@dystroy - 感谢您的回答。但是，复选框将在具有相同 id 的所有行中重复，因此它会禁用所有复选框。

永远不要为多个元素提供相同的 id 或名称！您可以使用计数器来构建动态名称/id (String id="repriseCheckBox_"+i++)。

【参考方案4】：

在jsp中你可以这样做：

<%
boolean checkboxDisabled = true; //do your logic here
String checkboxState = checkboxDisabled ? "disabled" : "";
%>
<input type="checkbox" <%=checkboxState%>>

【参考方案5】：

根据W3Schools，您可以使用 JavaScript 禁用复选框。

<!-- Checkbox who determine if the other checkbox must be disabled -->
<input type="checkbox" id="checkboxDetermine">
<!-- The other checkbox conditionned by the first checkbox -->
<input type="checkbox" id="checkboxConditioned">
<!-- JS Script -->
<script type="text/javascript">
    // Get your checkbox who determine the condition
    var determine = document.getElementById("checkboxDetermine");
    // Make a function who disabled or enabled your conditioned checkbox
    var disableCheckboxConditioned = function () 
        if(determine.checked) 
            document.getElementById("checkboxConditioned").disabled = true;
        
        else 
            document.getElementById("checkboxConditioned").disabled = false;
        
    
    // On click active your function
    determine.onclick = disableCheckboxConditioned;
    disableCheckboxConditioned();
</script>

您可以在此处查看演示：http://jsfiddle.net/antoinesubit/vptk0nh6/

【参考方案6】：

我知道这个问题有点老了，但这是我的解决方案。

 // HTML
 // <input type="checkbox" onClick="setcb1()"/>
 // <input type="checkbox" onClick="setcb2()"/>

 // cb1 = checkbox 1
 // cb2 = checkbox 2
  var cb1 = getId('cb1'), 
      cb2 = getId('cb2');

  function getId(id) 
    return document.getElementById(id);
  

  function setcb1() 
    if(cb1.checked === true) 
      cb2.checked = false;
      cb2.disabled = "disabled"; // You have to disable the unselected checkbox
     else if(cb1.checked === false) 
      cb2.disabled = ""; // Then enable it if there isn't one selected.  
    
  

  function setcb2() 
    if(cb2.checked === true) 
      cb1.checked = false;
      cb1.disabled = "disabled"
     else if(cb2.checked === false) 
      cb1.disabled = ""
  

希望这会有所帮助！