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

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


当前回答

我知道“disabled”不是一个可接受的答案,因为操作希望它发布。但是,即使设置了只读选项集,也必须在服务器端验证值。这是因为您无法阻止恶意用户使用readonly属性发布值。

我建议存储原始值(服务器端),并将其设置为禁用。然后,当他们提交表单时,忽略发布的任何值,并使用您存储的原始值。

它的外观和行为都像一个只读值。它处理(忽略)来自恶意用户的帖子。你真是一举两得。

其他回答

另一个“简单的解决方案”:

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

禁用=“禁用” / 禁用=真

或者是:

$('your selector').click(function(evt){evt.preventDefault()});

如果你想要你所有的复选框都是“锁定”的,这样用户就不能改变“checked”状态,如果“readonly”属性是存在的,那么你可以使用jQuery:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

这段代码很酷的一点是,它允许您在整个代码中更改“readonly”属性,而不必重新绑定每个复选框。

它也适用于单选按钮。

人们喜欢只读复选框和(以及)只读无线电组的主要原因是,不能更改的信息可以以输入的形式显示给用户。

好的,禁用控件就可以做到这一点——不幸的是禁用控件不能用键盘导航,因此违反了所有可访问性法规。这是我所知道的HTML中最大的问题。

摘自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','');
}