HTML 复选框可以设置为只读吗？

我以为可以，但是由于我没有把钱花在嘴上（可以这么说），设置 readonly 属性实际上似乎没有任何作用。

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

html checkbox

您可以使用此：

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

之所以可行，是因为 click 事件返回 false 会停止执行链。

READONLY不适用于复选框，因为它阻止您编辑字段的值，但是使用复选框实际上是在编辑字段的状态（| | off）

来自faqs.org ：

重要的是要了解，READONLY 仅阻止用户更改字段的值，而不是防止与字段进行交互。例如，在复选框中，您可以选中或选中它们（从而设置 CHECKED 状态），但是您不更改字段的值。

如果您不想使用disabled但仍想提交值，那么如何将值提交为隐藏字段并在不符合编辑条件的情况下仅将其内容打印给用户呢？例如

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}

这是一个您无法更改的复选框：

<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="this.checked=!this.checked;">

但是，您绝对必须验证服务器上的数据，以确保它没有被更改。

另一个 “简单解决方案”：

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

disabled =“disabled” / disabled = true

这带来了一些可用性问题。

如果要显示一个复选框，但又不想与之交互，那为什么还要一个复选框呢？

但是，我的方法是使用禁用的（用户希望禁用的复选框不可编辑，而不是使用 JS 来使已启用的复选框不起作用），并使用 JavaScript 来添加表单提交处理程序，该处理程序会在表单之前启用复选框已提交。这样，您就可以发布自己的价值。

即是这样的：

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}

<input type="checkbox" readonly="readonly" name="..." />

使用 jQuery：

$(':checkbox[readonly]').click(function(){
            return false;
        });

给出一些视觉提示（css，文本等）仍然是一个好主意，该控件将不接受输入。

我用它来达到结果：

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

我碰巧注意到下面给出的解决方案。发现它是我针对同一问题的研究。我不是谁张贴的，但不是我做的。它使用 jQuery：

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

这将使复选框为只读，这将有助于向客户端显示只读数据。

onclick="javascript: return false;"

答案