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

Posted 2023-03-05

【中文标题】如何使复选框只读？没有禁用？

【英文标题】：How can I make a checkbox readonly? not disabled?

【发布时间】：2012-08-29 08:02:22

【问题描述】：

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

所以请指教？？

【问题讨论】：

在此处复制：***.com/questions/155291/…

这对我不起作用....这就是问题..我正在使用 并在操作类中检索状态值...这是该 " 检查 onclick="return false" onkeydown="return false"/> 迭代器>

能否请您编辑原始问题并将代码以代码格式（标出 4 个空格）在评论中不可读。谢谢。

Can html checkboxes be set to readonly?的可能重复

【参考方案1】：

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

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

DEMO

【讨论】：

我试过但没有工作..当我点击复选框时，它会被取消选中

@Naga，您可以看到演示正常工作。我已在答案中添加了演示。

@Naga 同意昆丹。甚至在大多数浏览器中检查它以确保我没有遗漏任何东西。

不错的技巧，这样我就不需要创建一些虚拟字段和隐藏字段。

也适用于键盘导航（tab 到它，按空格键）。

【参考方案2】：

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

【讨论】：

这对我不起作用......这就是问题......我正在使用 并在操作类中检索状态值......这是该 " 检查 onclick="checkStatusSid();" onkeydown="return false"/>

@Naga - 没有什么能阻止你 onclick="checkStatusSid(); return false;"但是如果 onkeydown="return false;"适合你 - 为什么不呢？

【参考方案3】：

<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/

【讨论】：

谢谢..它现在可以工作了..这是因为 if case 导致了问题..谢谢

这会阻止您通过标签浏览元素 @MRodrigues 答案是更好的解决方案

对于只读，您应该能够通过复选框进行制表符，但不能使用空格键更改值。这些解决方案都没有。

在 Mac/Safari 上，如果单击复选框本身，该复选框仍然可以触发 jQuery 中的“更改”事件。为防止触发此类jQuery事件，请在***.com/a/41486636/1091926实现AleX的回答

连同上述正确答案，如果您想设置 css 以将其显示为禁用，请使用以下 jsfiddle 示例 jsfiddle.net/founddrama/eKSuj

【参考方案4】：

我个人喜欢这样做：

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

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

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

【讨论】：

聪明而简单。 +1

【参考方案5】：

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

//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")

【讨论】：

这很好地解决了我的问题，虽然我是在文档上这样做的，因为我在页面上的元素中动态加载，并且当我删除属性时我不必取消绑定事件：$(document ).on('click', 'input[type="checkbox"][readonly]', function (event) event.preventDefault(); );我还添加了一种样式，而不是使用 JQuery input[type='checkbox'][readonly] opacity: 0.5; 添加不透明度。

【参考方案6】：

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

【讨论】：

I tried setting disabled="true" but that doesn't work when posting to the action class. - OP 正在寻找不依赖于 disabled attr 的解决方案

【参考方案7】：

您可以通过 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

【讨论】：

这不会阻止通过键盘勾选复选框（选项卡到复选框，然后按空格键）。

为了防止通过键盘勾选复选框，请使用 Patrick 的回答***.com/a/12267350/1091926

如果复选框后面跟着标签（也是可点击的），我们也可以添加这个 CSS： input[type="checkbox"][readonly] + label pointer-events: none;

@jtheletter，只需要加tab-index="-1"

世纪最佳解决方案

【参考方案8】：

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

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

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

【讨论】：

这个答案比接受的答案更好，因为它可以防止使用键盘更改复选框。一个轻微的改进是使用 CSS 来防止禁用复选框时出现的灰色。它应该保持黑色。

【参考方案9】：

通过 CSS：

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

IE 不支持指针事件

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

【讨论】：

这就是一月份接受的答案所说的。正如 cmets 中所指出的，它不会阻止人们使用键盘进行检查。

@Quentin，如果：1.删除label标签； 2. 添加tabindex 属性 - 这不是样式。

【参考方案10】：

以上都不适合我。这是我的 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 提供适当的替换。

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

【参考方案11】：

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

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

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

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

【参考方案12】：

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

HTML：

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

CSS：

.style opacity: 1;

【参考方案13】：

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

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

这将解决上述所有问题。

【参考方案14】：

这是我针对 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://***.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;
        
    
);