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

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


当前回答

为什么不在上面用一个空白div覆盖输入呢?

<div id='checkbox_wrap'>
   <div class='click_block'></div>
   <input type='checkbox' /> 
</div>

然后是CSS

 #checkbox_wrap{
   height:10px;
   width:10px;
   }
 .click_block{
   height: 10px;
   width: 10px;
   position: absolute;
   z-index: 100;
}

其他回答

或者是:

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

我碰巧注意到下面给出的解决方案。在我的研究中发现了同样的问题。 我不知道是谁发的,但不是我做的。它使用jQuery:

$(document).ready(function() {
    $(":checkbox").bind("click", 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="checkbox" onclick="return false" />将为你工作,我正在使用这个

如果您需要将复选框与表单一起提交,但实际上对用户是只读的,我建议将它们设置为禁用,并在表单提交时使用javascript重新启用它们。

这有两个原因。首先也是最重要的是,您的用户可以看到他们可以更改的复选框和只读复选框之间的明显区别。Disabled就是这样做的。

第二个原因是禁用状态内置于浏览器中,因此当用户单击某个内容时,需要执行的代码更少。这可能更多的是个人喜好。在提交表单时,仍然需要一些javascript来取消禁用这些功能。

对我来说,在提交表单时使用一些javascript来取消禁用复选框似乎比使用隐藏输入来携带值更容易。