我有一个复选框,在某些条件下,需要禁用。结果是HTTP不会发布禁用的输入。
我怎样才能解决这个问题?提交输入,即使它被禁用并保持输入被禁用?
答案 0 :(得分:101)
更新:READONLY
不适用于复选框
您可以使用disabled="disabled"
,但此时复选框的值不会显示在POST
值中。其中一个策略是在同一表单中添加隐藏字段保存复选框的值,并从该字段读取值
只需将 disabled
更改为readonly
答案 1 :(得分:88)
我已经解决了这个问题。
由于 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
答案 2 :(得分:72)
如果您对使用JQuery感到满意,请在提交表单时删除disabled属性:
$("form").submit(function() {
$("input").removeAttr("disabled");
});
答案 3 :(得分:10)
您可以这样处理...对于每个复选框,创建一个具有相同name
属性的隐藏字段。但是使用您可以测试的某个默认值设置该隐藏字段的值。例如..
<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />
如果在提交表单时“选中”复选框,则该表单参数的值将为
"agree,false"
如果未选中该复选框,则值为
"false"
你可以使用任何值而不是“false”,但你明白了。
答案 4 :(得分:7)
<input type="checkbox" checked="checked" onclick="this.checked=true" />
我从问题开始:“如何发布/提交已禁用的输入复选框?”在我的回答中,我跳过评论:“如果我们要禁用复选框,我们肯定需要保留一个带前缀的值(选中或取消选中),我们也希望用户知道它(否则我们应该使用隐藏类型和不是复选框)“。在我的回答中,我认为我们总是要保持一个复选框检查,并且代码以这种方式工作。如果我们点击那个ckeckbox它将永远被检查,其值将被POSTED / Submitted!如果我写的话也一样 onclick =“this.checked = false”没有选中=“已选中”(注意:默认未选中)它将永远未选中,其值不会被POSTED /提交!。
答案 5 :(得分:7)
最简单的方法是:
<input type="checkbox" class="special" onclick="event.preventDefault();" checked />
这将阻止用户取消选中此复选框,并且在提交表单时仍会提交其值。如果您希望用户无法选中此复选框,请选中此选项。
此外,您可以在满足特定条件后使用javascript清除onclick(如果这就是您所追求的)。这是一个肮脏的小提琴,显示我的意思。它并不完美,但你得到了要点。
答案 6 :(得分:5)
创建一个css类,例如:
.disable{
pointer-events: none;
opacity: 0.5;
}
应用此类而不是已禁用的属性
答案 7 :(得分:4)
这就像一个魅力:
唯一的缺点是在提交时禁用输入字段的短暂闪烁。至少在我的情况下,这不是一个大问题!
$('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);
});
答案 8 :(得分:3)
不要禁用它;而是将其设置为只读,但这不会影响,因为不允许用户更改状态。但您可以使用jQuery来强制执行此操作(阻止用户更改复选框的状态:
$('input[type="checkbox"][readonly="readonly"]').click(function(e){
e.preventDefault();
});
这假定您不想修改的所有复选框都具有“readonly”属性。例如
<input type="checkbox" readonly="readonly">
答案 9 :(得分:3)
自:
我会给你另一种可能性:
将复选框设置为正常禁用。在用户提交表单之前,请通过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>
由于在提交表单之前启用了复选框,因此以常用方式发布其值。对于这个解决方案来说,唯一不太令人满意的是这个复选框启用了一段时间,用户可以看到。但这只是我可以忍受的一个细节。
答案 10 :(得分:1)
不幸的是,没有“简单”的解决方案。 readonly属性不能应用于复选框。我阅读了关于复选框的W3规范并找到了罪魁祸首:
如果控件在提交表单时没有当前值,则用户代理不需要将其视为成功控件。(http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2)
这会导致未检查状态和禁用状态导致相同的已解析值。
唯一能够做到这一点的完全证明方法是在提交表单时使用javascript添加名称相同的隐藏输入。
您可以使用我为此制作的小片段:
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”)和“(如果状态为'' - 未选中)。< / p>
此函数应由FORM元素中的'onsubmit'事件触发:
<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>
答案 11 :(得分:1)
将onsubmit="this['*nameofyourcheckbox*'].disabled=false"
添加到表单。
答案 12 :(得分:0)
除了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
答案 13 :(得分:0)
您可以根据需要禁用它,然后在提交表单之前删除disabled属性。
$('#myForm').submit(function() {
$('checkbox').removeAttr('disabled');
});
答案 14 :(得分:0)
<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是前一个子句的示例,用于管理根据子句检查(发布其值)或未选中(不发布其值)的第二个复选框,并且用户无法修改其状态;没有必要管理任何禁用第二个复选框
答案 15 :(得分:0)
添加onclick="this.checked=true"
解决了我的问题:
示例:
<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />
答案 16 :(得分:0)
这是可以从后端控制的另一种解决方法。
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";
仅出于样式目的添加类。
答案 17 :(得分:0)
我只是在这里的答案中结合了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。