Html 如何发布/提交禁用的输入复选框？

how to POST/Submit an Input Checkbox that is disabled?

提问by AnApprentice

I have a checkbox that, given certain conditions, needs to be disabled. Turns out HTTP doesn't post disabled inputs.

我有一个复选框，在特定条件下，需要禁用该复选框。结果证明 HTTP 没有发布禁用的输入。

How can I get around that? submitting the input even if it's disabled and keeping the input disabled?

我怎样才能解决这个问题？提交输入即使它被禁用并保持输入禁用？

回答by Francesco Laurita

UPDATE: READONLYdoesn't work on checkboxes

更新：READONLY不适用于复选框

You could use disabled="disabled"but at this point checkbox's value will not appear into POSTvalues. One of the strategy is to add an hidden field holding checkbox's value within the same form and read value back from that field

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

Simply change disabledto readonly

只需更改disabled为readonly

回答by mikhail-t

I've solved that problem.

我已经解决了那个问题。

Since readonly="readonly"tag is not working (I've tried different browsers), you have to use disabled="disabled"instead. But your checkbox's value will not post then...

由于readonly="readonly"标记不起作用（我尝试过不同的浏览器），因此您必须disabled="disabled"改用。但是您的复选框的值将不会发布...

Here is my solution:

这是我的解决方案：

To get "readonly"look and POSTcheckbox's value in the same time, just add a hidden "input" with the same name and value as your checkbox. You have to keep it next to your checkbox or between the same <form></form>tags:

要同时获得“只读”外观和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" />

Also, just to let ya'll know readonly="readonly", readonly="true", readonly="",or just READONLYwill NOT solve this! I've spent few hours to figure it out!

此外，只是让你知道readonly="readonly", readonly="true", readonly="",或只是READONLY不会解决这个问题！我花了几个小时才弄明白！

This reference is also NOT relevant (may be not yet, or not anymore, I have no idea): http://www.w3schools.com/tags/att_input_readonly.asp

这个参考也不相关（可能还没有，或者不再有，我不知道）：http: //www.w3schools.com/tags/att_input_readonly.asp

回答by Tristan Channing

If you're happy using JQuery then remove the disabled attribute when submitting the form:

如果您对使用 JQuery 感到满意，请在提交表单时删除 disabled 属性：

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

回答by jessegavin

You could handle it this way... For each checkbox, create a hidden field with the same nameattribute. But set the value of that hidden field with some default value that you could test against. For example..

你可以这样处理...对于每个复选框，创建一个具有相同name属性的隐藏字段。但是使用一些您可以测试的默认值设置该隐藏字段的值。例如..

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

If the checkbox is "checked" when the form is submitted, then the value of that form parameter will be

如果提交表单时复选框被“选中”，则该表单参数的值将是

"agree,false"

If the checkbox is not checked, then the value would be

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

"false"

You could use any value instead of "false", but you get the idea.

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

回答by PaoloMarass

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

I started from the problem: "how to POST/Submit an Input Checkbox that is disabled?" and in my answer I skipped the comment: "If we want to disable a checkbox we surely need to keep a prefixed value (checked or unchecked) and also we want that the user be aware of it (otherwise we should use a hidden type and not a checkbox)". In my answer I supposed that we want to keep always a checkbox checked and that code works in this way. If we click on that ckeckbox it will be forever checked and its value will be POSTED/Submitted! In the same way if I write onclick="this.checked=false" without checked="checked" (note: default is unchecked) it will be forever unchecked and its value will be not POSTED/Submitted!.

我从问题开始：“如何发布/提交禁用的输入复选框？” 在我的回答中，我跳过了评论：“如果我们想禁用一个复选框，我们肯定需要保留一个前缀值（选中或未选中），并且我们希望用户知道它（否则我们应该使用隐藏类型和不是复选框）”。在我的回答中，我假设我们希望始终选中一个复选框，并且该代码以这种方式工作。如果我们点击那个 ckeckbox，它将永远被检查，它的值将被发布/提交！以同样的方式，如果我写 onclick="this.checked=false" 而没有 checked="checked"（注意：默认是未选中的），它将永远处于未选中状态，并且它的值不会被发布/提交！。

回答by Austin Rodrigues

create a css class eg:

创建一个 css 类，例如：

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

apply this class instead of disabled attribute

应用此类而不是禁用属性

回答by thatFunkymunkey

The simplest way to this is:

最简单的方法是：

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

This will prevent the user from being able to deselect this checkbox and it will still submit its value when the form is submitted. Remove checked if you want the user to not be able to select this checkbox.

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

Also, you can then use javascript to clear the onclick once a certain condition has been met (if that's what you're after). Here's a down-and-dirty fiddle showing what I mean. It's not perfect, but you get the gist.

此外，一旦满足某个条件（如果这就是您所追求的），您就可以使用 javascript 清除 onclick。这是一个肮脏的小提琴，展示了我的意思。这并不完美，但你明白了要点。

http://jsfiddle.net/vwUUc/

http://jsfiddle.net/vwUUc/

回答by Andi R

This works like a charm:

这就像一个魅力：

1. Removethe "disabled" attributes
2. Submitthe form
3. Addthe attributes again. The best way to do this is to use a setTimeOutfunction, e.g. with a 1 millisecond delay.

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

The only disadvantage is the short flashing upof the disabled input fields when submitting. At least in my scenario that isn′t much of a problem!

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

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

});

回答by sporak

Since:

自从：

• setting readonly attribute to checkbox isn't valid according to HTML specification,
• using hidden element to submit value isn't very pretty way and
• setting onclick JavaScript that prevents from changing value isn't very nice too

• 根据 HTML 规范，将只读属性设置为复选框无效，
• 使用隐藏元素提交值不是很漂亮的方式
• 设置防止更改值的 onclick JavaScript 也不是很好

I'm gonna offer you another possibility:

我给你提供另一种可能：

Set your checkbox as disabled as normal. And before the form is submitted by user enable this checkbox by 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>

Because the checkbox is enabled before the form is submitted, its value is posted in common way. Only thing that isn't very pleasant about this solution is that this checkbox becomes enabled for a while and that can be seen by users. But it's just a detail I can live with.

因为在提交表单之前启用了复选框，所以它的值以普通方式发布。此解决方案唯一不太令人愉快的是，此复选框会启用一段时间并且用户可以看到。但这只是我可以接受的一个细节。

回答by Peter

Don't disable it; instead set it to readonly, though this has no effect as per not allowing the user to change the state. But you can use jQuery to enforce this (prevent the user from changing the state of the checkbox:

不要禁用它；而是将其设置为只读，尽管这不会因为不允许用户更改状态而产生任何影响。但是您可以使用 jQuery 来强制执行此操作（防止用户更改复选框的状态：

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

This assumes that all the checkboxes you don't want to be modified have the "readonly" attribute. eg.

这假设您不想修改的所有复选框都具有“只读”属性。例如。

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