我有一个复选框，在某些情况下，需要禁用它。原来 HTTP 没有发布禁用的输入。
我怎样才能解决这个问题？提交输入，即使它被禁用并保持输入被禁用？
【问题讨论】：
标签： html forms html-input
更新：READONLY 不适用于复选框
您可以使用disabled="disabled"，但此时复选框的值不会出现在POST 值中。其中一种策略是在同一表单中添加一个隐藏字段，该字段包含复选框的值并从该字段中读取值
只需将disabled 更改为readonly
【讨论】：
<input name="foo" value="bar" readonly="readonly" />
readonly 将不起作用，因为您将无法发布带有此类标签的复选框的值，请使用 disabled 以及隐藏的输入元素来保存复选框的值，看看如何： stackoverflow.com/a/8274787/448816
我已经解决了这个问题。
由于 readonly="readonly" 标签不起作用（我尝试过不同的浏览器），您必须使用 disabled="disabled"
反而。但是您的复选框的值将不会发布...
这是我的解决方案：
要同时获得 “readonly” 外观和 POST 复选框的值，只需添加一个与您的名称和值相同的隐藏“输入”复选框。您必须将其保留在您的复选框旁边或相同的 <form></form> 标签之间：
<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>
<input type="hidden" id="Tests" name="Tests" value="4" />
另外，只是让你知道readonly="readonly", readonly="true", readonly="", 或只是READONLY 不会解决这个问题！我花了几个小时才弄明白！
此参考也不相关（可能还没有，或者不再，我不知道）： http://www.w3schools.com/tags/att_input_readonly.asp
【讨论】：
如果您对使用 JQuery 感到满意，请在提交表单时删除 disabled 属性：
$("form").submit(function() {
$("input").removeAttr("disabled");
});
【讨论】：
<select> 或 <textfield> 或其他支持 disabled 属性的 HTML 元素，您可以选择它们并启用所有：$( "*:disabled" ).removeAttr("disabled");
创建一个css类例如：
.disable{
pointer-events: none;
opacity: 0.5;
}
应用这个类而不是禁用属性
【讨论】：
您可以这样处理...为每个复选框创建一个具有相同name 属性的隐藏字段。但是使用您可以测试的一些默认值设置该隐藏字段的值。比如……
<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />
如果在提交表单时复选框被“选中”，那么该表单参数的值将是
"agree,false"
如果未选中复选框，则值为
"false"
你可以使用任何值来代替“false”，但你明白了。
【讨论】：
最简单的方法是：
<input type="checkbox" class="special" onclick="event.preventDefault();" checked />
这将阻止用户取消选中此复选框，并且在提交表单时仍会提交其值。如果您希望用户无法选中此复选框，请删除选中。
此外，一旦满足特定条件（如果这是您所追求的），您就可以使用 javascript 清除 onclick。这是一个肮脏的小提琴，显示了我的意思。它并不完美，但你明白了要点。
【讨论】：
<input type="checkbox" checked="checked" onclick="this.checked=true" />
我从问题开始：“如何发布/提交禁用的输入复选框？”在我的回答中，我跳过了评论：“如果我们想禁用一个复选框，我们肯定需要保留一个前缀值（选中或未选中），并且我们希望用户知道它（否则我们应该使用隐藏类型和不是复选框）”。在我的回答中，我认为我们希望始终选中一个复选框，并且该代码以这种方式工作。如果我们点击那个复选框，它将永远被选中，并且它的值将被发布/提交！同样，如果我写 onclick="this.checked=false" without checked="checked" （注意：默认未选中）它将永远处于未选中状态，并且其值不会被 POSTED/Submitted！。
【讨论】：
这就像一个魅力：
唯一的缺点是提交时禁用的输入字段会短暂闪烁。至少在我的情况下这不是什么大问题！
$('form').bind('submit', function () {
var $inputs = $(this).find(':input'),
disabledInputs = [],
$curInput;
// remove attributes
for (var i = 0; i < $inputs.length; i++) {
$curInput = $($inputs[i]);
if ($curInput.attr('disabled') !== undefined) {
$curInput.removeAttr('disabled');
disabledInputs.push(true);
} else
disabledInputs.push(false);
}
// add attributes
setTimeout(function() {
for (var i = 0; i < $inputs.length; i++) {
if (disabledInputs[i] === true)
$($inputs[i]).attr('disabled', true);
}
}, 1);
});
【讨论】：
不要禁用它；而是将其设置为只读，尽管这没有任何影响，因为不允许用户更改状态。但是您可以使用 jQuery 来强制执行此操作（防止用户更改复选框的状态：
$('input[type="checkbox"][readonly="readonly"]').click(function(e){
e.preventDefault();
});
这假定您不想修改的所有复选框都具有“只读”属性。例如。
<input type="checkbox" readonly="readonly">
【讨论】：
自：
我会给你另一种可能性：
将您的复选框设置为正常禁用。在用户提交表单之前，请通过 JavaScript 启用此复选框。
<script>
function beforeSumbit() {
var checkbox = document.getElementById('disabledCheckbox');
checkbox.disabled = false;
}
</script>
...
<form action="myAction.do" method="post" onSubmit="javascript: beforeSubmit();">
<checkbox name="checkboxName" value="checkboxValue" disabled="disabled" id="disabledCheckbox" />
<input type="submit />
</form>
由于在提交表单之前启用了复选框，因此它的值以普通方式发布。这个解决方案唯一不太令人愉快的是这个复选框会启用一段时间并且用户可以看到。但这只是我可以接受的一个细节。
【讨论】：
不幸的是，没有“简单”的解决方案。属性 readonly 不能应用于复选框。我阅读了有关复选框的 W3 规范并找到了罪魁祸首：
如果在提交表单时控件没有当前值，用户代理不需要将其视为成功的控件。 (http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2)
这会导致未检查状态和禁用状态产生相同的解析值。
做到这一点的唯一完全证明方法是在提交表单时添加一个与 javascript 同名的隐藏输入。
你可以使用我为此制作的小sn-p：
function disabled_checkbox() {
var theform = document.forms[0];
var theinputs = theform.getElementsByTagName('input');
var nrofinputs = theinputs.length;
for(var inputnr=0;inputnr<nrofinputs;inputnr++) {
if(theinputs[inputnr].disabled==true) {
var thevalueis = theinputs[inputnr].checked==true?"on":"";
var thehiddeninput = document.createElement("input");
thehiddeninput.setAttribute("type","hidden");
thehiddeninput.setAttribute("name",theinputs[inputnr].name);
thehiddeninput.setAttribute("value",thevalueis);
theinputs[inputnr].parentNode.appendChild(thehiddeninput);
}
}
}
这会查找文档中的第一个表单，收集所有输入并搜索禁用的输入。当找到禁用的输入时，会在 parentNode 中创建一个具有相同名称和值 'on'（如果它的状态是 'checked'）和 ''（如果它的状态是 '' - 未选中）的隐藏输入。
此函数应由 FORM 元素中的事件 'onsubmit' 触发，如下所示：
<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>
【讨论】：
将onsubmit="this['*nameofyourcheckbox*'].disabled=false" 添加到表单中。
【讨论】：
除了hidden 字段之外没有其他选项，因此请尝试使用hidden 字段，如下面的代码所示：
<input type="hidden" type="text" name="chk1[]" id="tasks" value="xyz" >
<input class="display_checkbox" type="checkbox" name="chk1[]" id="tasks" value="xyz" checked="check" disabled="disabled" >Tasks
【讨论】：
我只是在这里的答案中结合了 HTML、JS 和 CSS 建议
HTML：
<input type="checkbox" readonly>
jQuery:
(function(){
// Raj: https://stackoverflow.com/a/14753503/260665
$(document).on('click', 'input[type="checkbox"][readonly]', function(e){
e.preventDefault();
});
})();
CSS：
input[type="checkbox"][readonly] {
cursor: not-allowed;
opacity: 0.5;
}
由于元素未被“禁用”，它仍会通过 POST。
【讨论】：
<html>
<head>
<script type="text/javascript">
function some_name() {if (document.getElementById('first').checked) document.getElementById('second').checked=false; else document.getElementById('second').checked=true;}
</script>
</head>
<body onload="some_name();">
<form>
<input type="checkbox" id="first" value="first" onclick="some_name();"/>first<br/>
<input type="checkbox" id="second" value="second" onclick="some_name();" />second
</form>
</body>
</html>
函数 some_name 是前一个子句的示例，用于根据子句管理第二个复选框被选中（发布其值）或未选中（不发布其值）并且用户不能修改其状态；无需管理第二个复选框的任何禁用
【讨论】：
您可以根据需要将其保持禁用状态，然后在提交表单之前删除 disabled 属性。
$('#myForm').submit(function() {
$('checkbox').removeAttr('disabled');
});
【讨论】：
添加onclick="this.checked=true"解决我的问题：
示例：
<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />
【讨论】：
这是另一个可以从后端控制的解决方法。
ASPX
<asp:CheckBox ID="Parts_Return_Yes" runat="server" AutoPostBack="false" />
在 ASPX.CS 中
Parts_Return_Yes.InputAttributes["disabled"] = "disabled";
Parts_Return_Yes.InputAttributes["class"] = "disabled-checkbox";
仅出于样式目的添加类。
【讨论】：