如何 POST/提交已禁用的输入复选框？

我有一个复选框，在特定条件下，需要禁用它。

我怎样才能避免这种情况呢? 即使禁用输入，也要提交输入，并保持输入禁用？

116438 次浏览
小开

更新 : READONLY不能在复选框上工作

您可以使用 disabled="disabled"，但此时复选框的值将不会出现在 POST值中。其中一个策略是在同一表单中添加一个隐藏字段，该字段保存复选框的值，并从该字段中读取值

只需将 disabled改为 readonly

小开

您可以这样处理它... 对于每个复选框，创建一个具有相同 name属性的隐藏字段。但是将该隐藏字段的值设置为某个可以进行测试的默认值。比如说。.

<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />

如果在提交表单时选中了复选框，那么该表单参数的值将为

"agree,false"

如果未选中该复选框，则该值将为

"false"

你可以使用任何值而不是“ false”，但是你明白了。

小开

我已经解决了这个问题。

由于 readonly="readonly"标签不起作用(我尝试了不同的浏览器) ，因此必须使用 < strong > disabled="disabled" 但是您的复选框的值将不会显示..。

我的解决办法是:

要同时获得 “只读”外观和 职位复选框的值，只需添加一个隐藏的“输入”，其名称和值与您的复选框相同。你必须把它放在你的复选框旁边或者相同的 <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

小开 
<input type="checkbox" checked="checked" onclick="this.checked=true" />

我从这个问题开始: “如何 POST/Submit 一个禁用的输入复选框?”在我的回答中，我跳过了注释: “如果我们想要禁用一个复选框，我们肯定需要保留一个前缀值(选中或未选中) ，并且我们希望用户能够意识到它(否则我们应该使用一个隐藏类型，而不是一个复选框)”。在我的回答中，我认为我们应该总是选中复选框，并且代码就是这样工作的。如果我们点击那个复选框，它将永远被选中，它的值将被 POSTED/Submit！就像我写作一样 Onclick = “ this. check = false”没有 check = “ check”(注意: default is uncheck)它将永远不会被检查，它的值将不会被 POSTED/Submit。

小开 
<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 函数是前一个子句的一个例子，用于管理第二个复选框，该复选框根据子句被选中(发布其值)或未选中(不发布其值) ，用户不能修改其状态; 不需要管理任何禁用第二个复选框的操作

小开

如果您喜欢使用 JQuery，那么在提交表单时删除禁用的属性:

$("form").submit(function() {
$("input").removeAttr("disabled");
});
小开

不要禁用它; 而是将其设置为只读，尽管这对于不允许用户更改状态没有任何影响。但是你可以使用 jQuery 来强制执行(防止用户改变复选框的状态:

$('input[type="checkbox"][readonly="readonly"]').click(function(e){
e.preventDefault();
});

这里假设您不希望修改的所有复选框都具有“ readonly”属性。

<input type="checkbox" readonly="readonly">
小开

最简单的方法是:

<input type="checkbox" class="special" onclick="event.preventDefault();" checked />

这将防止用户取消选中此复选框，并且在提交表单时仍将提交其值。如果希望用户无法选中此复选框，请选中“删除”。

另外，一旦满足了某个条件(如果你想要的话) ，你可以使用 javascript 来清除 onclick。这是一把脏兮兮的小提琴，表明了我的意思。虽然不是很完美，但你懂我的意思。

Http://jsfiddle.net/vwuuc/

小开

自从:

  • 根据 HTML 规范，将 readonly 属性设置为复选框是无效的,
  • 使用隐藏元素来提交值不是很好的方式
  • 设置 onclick JavaScript 阻止改变值也不是很好

我给你提供另一种可能性:

将您的复选框设置为正常禁用。在用户提交表单之前，通过 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)

这会导致未选中状态和禁用状态产生相同的解析值。

  • Readonly = “ readonly”不是复选框的有效属性。
  • Onclick = “ event.proventDefault () ;”并不总是一个好的解决方案，因为它是在复选框本身上触发的。但在某些情况下，它可以发挥作用。
  • 启用 onSubmit 复选框不是一个解决方案，因为控件仍然没有被视为成功的控件，所以不会解析该值。
  • 在 HTML 中添加另一个具有相同名称的隐藏输入不起作用，因为第一个控件值由于具有相同名称而被第二个控件值覆盖。

做到这一点的唯一完整的方法是 在提交表单时使用 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’(如果它的状态被‘勾选’)和“(如果它的状态被‘勾选’-未被勾选)。

这个函数应该由 FORM 元素中的事件‘ onmit’触发，如下所示:

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>
小开

这种方法很有效:

  1. 删除 “禁用”属性
  2. 提交 表格
  3. 再次添加 属性。最好的方法是使用 SetTimeOut函数，例如使用1毫秒的延迟。

提交时禁用的输入字段的唯一 缺点是短时闪烁。至少在我的情况下，这不是什么大问题！

$('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);


});
小开

除了 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
小开

将 onsubmit="this['*nameofyourcheckbox*'].disabled=false"添加到表单中。

小开

您可以根据需要保持禁用，然后在提交表单之前删除禁用的属性。

$('#myForm').submit(function() {
$('checkbox').removeAttr('disabled');
});
小开

创建一个 css 类，例如:

.disable{
pointer-events: none;
opacity: 0.5;
}

应用此类而不是禁用属性

小开

添加 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";

类仅用于样式目的。

小开

我只是在这里的答案中结合了 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。


提交答案