javascript - 如何使复选框只读？没有禁用？

Question

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

所以请指教？？

Answer 1

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

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

演示

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;
}

演示

Answer 4

我个人喜欢这样做：

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

我认为这更好有两个原因：

1. 用户清楚地知道他不能编辑这个值
2. 提交表单时发送该值。

Answer 5

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

Answer 6

我使用 JQuery，所以我可以在复选框上使用 readonly 属性。

//This will make all read-only check boxes truly read-only
$('input[type="checkbox"][readonly]').on("click.readonly", function(event){event.preventDefault();}).css("opacity", "0.5");

如果您希望复选框再次可编辑，则需要对特定复选框执行以下操作。

$('specific checkbox').off('.readonly').removeAttr("readonly").css("opacity", "1")

Answer 7

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

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

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

Answer 8

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

1. disable=true因为其他功能可能不起作用，例如表单发布。
2. onclick='return false'因为其他事件可能仍然会触发更改，例如 keyup，keydown 焦点时。
3. e.preventDefault()
4. 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 9

以上都不适合我。这是我的 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 10

就我而言，我只需要在某些条件下使用它，并且可以在 HTML 中轻松完成：

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

或者如果您一直需要这个：

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

Answer 11

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

HTML：

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

CSS：

.style{ opacity: 1; }

Answer 12

这是我针对 Sencha ExtJS 7.2+ 的解决方案（覆盖）（单个覆盖中的复选框和单选）

Ext.define('MyApp.override.field.Checkbox', {
    override: 'Ext.field.Checkbox',

    /**
     * OVERRIDE: to allow updateReadOnly to work propperly
     * @param {boolean} newValue
     *
     * To ensure the disabled state stays active if the field is still readOnly
     * we re - set the disabled state
     */
    updateDisabled(newValue) {
        this.callParent(arguments);

        if (!newValue && this.getReadOnly()) {
            this.inputElement.dom.disabled = true;
        }
    },

    /**
     * OVERRIDE: readonly for radiogroups and checkboxgroup do not work as other fields
     *     https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly
     *
     * @param {boolean} newValue
     *
     *  - use disabled on the field
     */
    updateReadOnly(value) {
        this.callParent(arguments);

        if (!this.getDisabled()) {
            this.inputElement.dom.disabled = value;
        }
    }
});

Answer 13

摘自https://stackoverflow.com/a/71086058/18183749

如果您不能使用“禁用”属性（因为它会删除 POST 时的值输入），并注意到 html 属性“只读”仅适用于 textarea 和一些输入（文本、密码、搜索，据我所知） )，最后，如果您不想费心复制所有带有隐藏输入的选择、复选框和收音机，您可能会发现以下函数或他喜欢的任何内部逻辑：

  addReadOnlyToFormElements = function (idElement) {

        // html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
        $('#' + idElement + ' input[type="checkbox"]:not(:checked)').prop('disabled',true); 

        // and, on the selected ones, to deactivate mouse/keyboard events and mimic readonly appearance
        $('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','-1').css('pointer-events','none').css('opacity','0.5');
    }

没有什么比删除这些只读的更容易的了

removeReadOnlyFromFormElements = function (idElement) {

     // Remove the disabled attribut on non-selected
    $('#' + idElement + ' input[type="checkbox"]:not(:checked)').prop('disabled',false); 
    
    // Restore mouse/keyboard events and remove readonly appearance on selected ones
    $('#' + idElement + ' input[type="checkbox"]:checked').prop('tabindex','').css('pointer-events','').css('opacity','');
}

Answer 14

通过 CSS：

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

IE<10 不支持指针事件

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

Answer 15

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