Question

我有一个表单，我必须将表单值发布到我的操作类。在这种形式中，我有一个需要只读的复选框。我尝试设置disabled="true"，但在发布到操作类时不起作用。

所以请建议??

Answer 1

没有属性可以使复选框只读。但你可以尝试这个技巧。

<input type="checkbox" onclick="return false" />

<强> DEMO

Answer 2

<input type="checkbox" checked onclick="return false;" onkeydown="return false;"/>

http://jsfiddle.net/2srjc/

如果您担心Tab键顺序，只有在未按下Tab键的情况下才会为keydown事件返回false：

<input type="checkbox" checked onclick="return false;" onkeydown="e = e || window.event; if(e.keyCode !== 9) return false;"/>

http://jsfiddle.net/2srjc/149/

Answer 3

您可以通过css轻松完成此操作。 HTML：

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" readonly />
    <br/>
    <input name="chkBox_2" type="checkbox" value="1" readonly />
    <br/>
    <input id="submitBttn" type="button" value="Submit">
</form>

CSS：

input[type="checkbox"][readonly] {
  pointer-events: none;
}

Demo

Answer 4

我个人喜欢这样做：

<input type="checkbox" name="option" value="1" disabled="disabled" />
<input type="hidden" name="option" value="1">

我认为这样做有两个原因：

用户清楚地了解他无法编辑此值
提交表单时会发送该值。

Answer 5

您可以简单地添加onclick="return false" - 这将停止浏览器执行默认操作（选中/未选中复选框将不会更改）

Answer 6

制作一个没有名称和值的假复选框，强制隐藏字段中的值：

<input type="checkbox" disabled="disabled" checked="checked">
<input type="hidden" name="name" value="true">

注意：如果您在复选框中输入名称和值，则无论如何都会被具有相同名称的输入覆盖

Answer 7

如果您对以下内容说“不”：

disable=true 因为其他功能可能无法使用，例如表单发布。
onclick='return false' 因为其他事件可能仍会触发更改，例如聚焦时的 keyup、keydown。
e.preventDefault()
CSS：pointer-events: none; 因为您可能希望允许更改在特定条件下。

然后只需在只读复选框的 change 事件中执行此操作：

$("#chkReadOnly").on("change", function () {
   // Enclose with 'if' statement if conditional.
   // Simply restore back the default value, i.e. true.
   $(this).prop("checked", true);
});

这将解决所有上述问题。

Answer 8

以上都不对我有用。这是我的vanilla.js解决方案：

(function() {
    function handleSubmit(event) {
        var form = event.target;
        var nodes = form.querySelectorAll("input[disabled]");
        for (var node of nodes) {
            node.disabled = false;
        }
    }

    function init() {
        var submit_form_tag = document.getElementById('new_whatever');
        submit_form_tag.addEventListener('submit', handleSubmit, true);
    }

    window.onload = init_beworst;

})();

请确保为表单ID提供适当的替换。

我的应用程序有一些上下文，其中一些复选框已预先选中，而另一些则限制了可以选中的其他复选框的数量。当您达到该限制时，所有未选中的框都会被禁用，如果您取消选中其中一个，则所有未选中的框会再次启用。当用户按下“提交”按钮时，所有复选框都将提交给用户，无论是否已预先选中它们。

Answer 9

就我而言，我只在特定条件下才需要它，并且可以通过HTML轻松完成：

<input type="checkbox" [style.pointer-events]="(condition == true) ? 'none' : 'auto'">

或者如果您始终需要它：

<input type="checkbox" style="pointer-events: none;">

Answer 10

你不能直接做，但你可以用这种方式来做我试过，而且对我来说很好，同时它很简单

HTML：

<input type="checkbox" checked disabled="true" class="style" />

CSS：

.style{ opacity: 1; }

Answer 11

通过CSS：

<label for="">
  <input type="checkbox" style="pointer-events: none; tabindex: -1;" checked> Label
</label>

IE＆lt; 10

中不支持

指针事件

https://jsfiddle.net/fl4sh/3r0v8pug/2/

Answer 12

document.getElementById("your checkbox id").disabled=true;

如何只读一个复选框？没有禁用？

12 个答案:

如果您对以下内容说“不”：