我认为他们可以,但我没有把我的钱放在我的嘴(这么说)设置只读属性实际上似乎没有做任何事情。

我宁愿不使用Disabled,因为我希望选中的复选框与表单的其余部分一起提交,我只是不希望客户端能够在某些情况下更改它们。


当前回答

在这里,你们没有人想到的是,你们都在使用JavaScript,任何用户都可以很容易地绕过它。

简单地禁用它将禁用所有JQuery/Return False语句。

只读复选框的唯一选项是服务器端。

显示他们,让他们改变他们,但不接受新的帖子数据从他们。

其他回答

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

如果你不能使用'disabled'属性(因为它会擦除值的 input at POST),并注意到html属性'readonly'只工作 在文本区域和一些输入(文本,密码,搜索,据我所见), 最后,如果你不想重复你所有的 您可能会发现,带有隐藏输入逻辑的选择、复选框和单选 下面的函数或任何他的内部逻辑你喜欢:

    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 disable mouse/keyoard 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','');
}
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

我会使用readonly属性

<input type="checkbox" readonly>

然后使用CSS禁用交互:

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

注意,使用伪类:read-only在这里不起作用。

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

这是一个不能更改的复选框:

<input type="checkbox" disabled="disabled" checked="checked">

只需添加disabled="disabled"作为属性。

编辑以处理评论:

如果你想要数据被返回,那么一个简单的解决方案是将相同的名称应用到隐藏的输入:

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

这样,当复选框被设置为“禁用”时,它只服务于数据的可视化表示,而不是实际“链接”到数据。在回发中,当复选框被禁用时,隐藏输入的值将被发送。

我用这个方法得到了如下结果:

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