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

Question

我认为他们可以，但由于我没有把钱放在嘴边（可以这么说）设置 readonly 属性实际上似乎没有做任何事情。

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

score 638 · Accepted Answer

你可以使用这个：

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

这是有效的，因为从 click 事件返回 false 会停止执行链继续。

score 447 · Accepted Answer

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

来自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';
}

score 380 · Accepted Answer

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

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

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

score 72 · Accepted Answer

<input type="checkbox" onclick="this.checked=!this.checked;">

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

score 57 · Accepted Answer

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

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

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

score 45 · Accepted Answer

这提出了一些可用性问题。

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

但是，我的方法是使用禁用（用户希望禁用的复选框不可编辑，而不是使用 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;
       }
    }
}

score 40 · Accepted Answer

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

用jQuery：

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

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

score 25 · Accepted Answer

我用它来实现结果：

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

score 22 · Accepted Answer

迟来的答案，但大多数答案似乎过于复杂。

据我了解，OP基本上想要：

显示状态的只读复选框。
随表单返回的值。

应当指出的是：

OP 不喜欢使用该disabled属性，因为他们“希望选中的复选框与表单的其余部分一起提交”。
未选中的复选框不会与表单一起提交，因为上面 1. 中 OP 的引用表明他们已经知道。基本上，复选框的值仅在选中时才存在。
禁用的复选框清楚地表明它无法根据设计进行更改，因此用户不太可能尝试更改它。
复选框的值不限于表示其状态，例如yes或false，可以是任何文本。

因此，由于该readonly属性不起作用，因此不需要 javascript 的最佳解决方案是：

一个禁用的复选框，没有名称或值。
如果复选框要显示为选中状态，则会显示一个隐藏字段，其中包含存储在服务器上的名称和值。

所以对于一个选中的复选框：

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

对于未选中的复选框：

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

禁用输入（尤其是复选框）的主要问题是它们的对比度差，这对于某些具有某些视觉障碍的人来说可能是个问题。用简单的词来表示一个值可能会更好，例如Status: noneor Status: implemented，但在使用后者时包括上面的隐藏输入，例如：

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

score 19 · Accepted Answer

我会使用只读属性

<input type="checkbox" readonly>

然后使用 CSS 禁用交互：

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

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

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

score 13 · Accepted Answer

我碰巧注意到下面给出的解决方案。发现它是我对同一问题的研究。我不知道是谁发布的，但它不是我制作的。它使用 jQuery：

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

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

score 13 · Accepted Answer

当前的大多数答案都存在以下一个或多个问题：

只检查鼠标而不是键盘。
仅检查页面加载。
钩住流行的更改或提交事件，如果有其他东西让它们上钩，它们将不会总是有效。
需要隐藏输入或其他特殊元素/属性，您必须撤消才能使用 javascript 重新启用复选框。

以下很简单，没有这些问题。

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

如果复选框是只读的，它不会改变。如果不是，它会的。它确实使用 jquery，但你可能已经在使用它了......

有用。

score 9 · Accepted Answer

9

onclick="javascript: return false;"

于 2010-07-20T17:43:45.790 回答

score 9 · Accepted Answer

如果您希望它们通过表单提交到服务器但不与用户交互，您可以pointer-events: none在 css 中使用（适用于除 IE10- 和 Opera 12- 之外的所有现代浏览器）并设置 tab-index -1以防止通过键盘进行更改。另请注意，您不能使用label标签，因为单击它会改变状态。

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}

<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

score 7 · Accepted Answer

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

score 6 · Accepted Answer

6

<input type="checkbox" onclick="return false" />会为你工作，我正在使用这个

于 2012-04-26T06:01:29.580 回答

score 4 · Accepted Answer

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

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

它的外观和行为就像它是一个只读值。它处理（忽略）来自恶意用户的帖子。你用一块石头杀死了两只鸟。

score 4 · Accepted Answer

基于上述答案，如果使用 jQuery，这可能是所有输入的一个很好的解决方案：

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

我将它与 Asp.Net MVC 一起使用以将某些表单元素设置为只读。以上通过将任何父容器设置为 .readonly 来适用于文本和复选框，例如以下场景：

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>

score 4 · Accepted Answer

这里的一些答案似乎有点迂回，但这里有一个小技巧。

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>

然后在 jquery 中，您可以选择以下两个选项之一：

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

</p>

演示：http: //jsfiddle.net/5WFYt/

score 4 · Accepted Answer

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

score 4 · Accepted Answer

不，输入复选框不能是只读的。

但是您可以使用 javascript 将它们设为只读！

随时在任何地方添加此代码，通过防止用户以任何方式修改复选框，使复选框按假定只读工作。

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});

input[type=checkbox][readonly] {
    cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

您可以在 jQuery 加载后随时添加此脚本。

它适用于动态添加的元素。

它通过拾取页面上任何元素上的单击事件（发生在更改事件之前）来工作，然后检查该元素是否为只读复选框，如果是，则阻止更改。

有这么多的ifs使它不影响页面的性能。

score 4 · Accepted Answer

readonly不适用于<input type='checkbox'>

因此，如果您需要从表单中的禁用复选框提交值，您可以使用 jQuery：

$('form').submit(function(e) {
    $('input[type="checkbox"]:disabled').each(function(e) {
        $(this).removeAttr('disabled');
    })
});

这样，在提交表单时，禁用的属性就会从元素中删除。

score 3 · Accepted Answer

我会评论 ConroyP 的答案，但这需要 50 个我没有的声誉。我确实有足够的声誉来发布另一个答案。对不起。

ConroyP 的答案的问题是，该复选框甚至不包含在页面上，因此无法更改。尽管 Electrons_Ahoy 没有规定太多，但最好的答案是不可更改的复选框看起来与可更改的复选框相似（如果不相同），就像应用“禁用”属性时的情况一样。解决 Electrons_Ahoy 给出的不想使用“禁用”属性的两个原因的解决方案不一定是无效的，因为它使用了“禁用”属性。

假设两个布尔变量 $checked 和 $disabled ：

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

如果 $checked 为真，则复选框显示为选中状态。如果 $checked 为 false，则复选框显示为未选中。当且仅当 $disabled 为 false 时，用户才能更改复选框的状态。当复选框未选中时，无论用户是否选中，都不会发布“my_name”参数。“my_name=1”参数在复选框被选中时发布，无论用户是否选中。我相信这就是 Electrons_Ahoy 所寻找的。

score 2 · Accepted Answer

如果您希望所有复选框都“锁定”，因此如果存在“只读”属性，则用户无法更改“已检查”状态，那么您可以使用 jQuery：

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

这段代码很酷的一点是，它允许您更改整个代码中的“只读”属性，而无需重新绑定每个复选框。

它也适用于单选按钮。

score 1 · Accepted Answer

聚会很晚，但我找到了 MVC 的答案 (5) 我禁用了 CheckBox 并在复选框之前添加了一个 HiddenFor，所以当它发布时，如果首先找到 Hidden 字段并使用该值。这确实有效。

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>

score 1 · Accepted Answer

1

只需使用如下所示的简单禁用标签。

<input type="checkbox" name="email"  disabled>

于 2018-12-28T03:23:36.910 回答

score 0 · Accepted Answer

我只是不希望客户能够在某些情况下更改它们。

READONLY 本身不起作用。你也许可以用 CSS 做一些时髦的事情，但我们通常只是将它们禁用。

警告：如果它们被发布回来，那么客户可以更改它们，期间。您不能依靠 readonly 来阻止用户更改某些内容。总是可以使用 fiddler 或者只是使用带有 firebug 的 html 或类似的东西。

score 0 · Accepted Answer

如果您需要将复选框与表单一起提交但对用户有效，我建议将它们设置为禁用并在提交表单时使用 javascript 重新启用它们。

这有两个原因。首先也是最重要的，您的用户可以从他们可以更改的复选框和只读复选框之间的明显差异中受益。禁用执行此操作。

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

在提交表单以取消禁用复选框时，我似乎更容易使用一些 javascript，而不是使用隐藏的输入来携带值。

score 0 · Accepted Answer

人们想要一个只读复选框和（以及）一个只读单选组的主要原因是，无法更改的信息可以以输入的形式呈现给用户。

OK disabled 会这样做——不幸的是，禁用的控件不能通过键盘导航，因此违反了所有可访问性法规。这是我所知道的 HTML 中最大的挂断。

score 0 · Accepted Answer

贡献非常非常晚......但无论如何。在页面加载时，使用 jquery 禁用除当前选中的复选框之外的所有复选框。然后将当前选定的设置为只读，使其具有与禁用的相似的外观。用户无法更改该值，并且选定的值仍然提交。

score 0 · Accepted Answer

0

要不就：

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

于 2013-05-22T13:39:15.277 回答

score 0 · Accepted Answer

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

如果您不能使用“禁用”属性（因为它会删除 POST 时的值输入），并注意到 html 属性“只读”仅适用于 textarea 和一些输入（文本、密码、搜索，据我所知） )，最后，如果您不想费心用隐藏的输入逻辑复制所有选择、复选框和单选，您可能会发现以下函数或任何您喜欢的内部逻辑：

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

score -1 · Accepted Answer

When posting an HTML checkbox to the server, it has a string value of 'on' or ''.

Readonly does not stop the user editing the checkbox, and disabled stops the value being posted back.
One way around this is to have a hidden element to store the actual value and the displayed checkbox is a dummy which is disabled. This way the checkbox state is persisted between posts.

Here is a function to do this. It uses a string of 'T' or 'F' and you can change this any way you like. This has been used in an ASP page using server side VB script.

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)

    dim strThisCheckedValue

    if (i_strChecked_TorF = "T") then
        strThisCheckedValue = " checked "
        i_strChecked_TorF = "on"
    else
        strThisCheckedValue = ""
        i_strChecked_TorF = ""
    end if

    MakeDummyReadonlyCheckbox = "<input type='hidden' id='" & i_strName & "' name='" & i_strName & "' " & _
        "value='" & i_strChecked_TorF & "'>" & _
    "<input type='checkbox' disabled id='" & i_strName & "Dummy' name='" & i_strName & "Dummy' " & _
        strThisCheckedValue & ">"   
end function

public function GetCheckbox(i_objCheckbox)

    select case trim(i_objCheckbox)

        case ""
            GetCheckbox = "F"

        case else
            GetCheckbox = "T"

    end select

end function

At the top of an ASP page you can pickup the persisted value...

strDataValue = GetCheckbox(Request.Form("chkTest"))

and when you want to output your checkbox you can do this...

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

I have tested this and it works just fine. It also does not rely upon JavaScript.

score -1 · Accepted Answer

如果其他人使用 MVC 和编辑器模板，这就是我控制显示只读属性的方式（我使用自定义属性来获取 if 语句中的值）

@if (true)
{
    @Html.HiddenFor(m => m)
    @(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No"))
} 
else
{               
    @Html.CheckBoxFor(m => m)
}

score -1 · Accepted Answer

我的解决方案实际上与 FlySwat 的解决方案相反，但我不确定它是否适合您的情况。我有一组复选框，每个复选框都有一个提交表单的 onClick 处理程序（它们用于更改表的过滤器设置）。我不想允许多次点击，因为第一次之后的后续点击会被忽略。所以我在第一次点击后禁用所有复选框，并在提交表单后：

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

复选框位于 ID 为“filters”的 span 元素中 - 代码的第二部分是一个 jQuery 语句，它遍历复选框并禁用每个复选框。这样，复选框值仍然通过表单提交（因为表单是在禁用它们之前提交的），并且它会阻止用户在页面重新加载之前更改它们。

score -1 · Accepted Answer

-1

<input name="testName" type="checkbox" disabled>

于 2014-05-27T08:55:58.800 回答

score -1 · Accepted Answer

提交表单时，我们实际上传递的是复选框的值，而不是状态（选中/未选中）。Readonly 属性阻止我们编辑值，而不是状态。如果您想要一个代表您要提交的值的只读字段，请使用只读文本。

score -1 · Accepted Answer

@(Model.IsEnabled) 使用此条件动态选中和取消选中，如果复选框已选中，则设置为只读。

 <input id="abc" name="abc"  type="checkbox" @(Model.IsEnabled ? "checked=checked onclick=this.checked=!this.checked;" : string.Empty) >

score -1 · Accepted Answer

-1

最新的 jQuery 有这个功能

$("#txtname").prop('readonly', false);

于 2018-02-19T07:23:37.997 回答

score -3 · Accepted Answer

-3

最简单的（在我看来）：

onclick="javascript:{this.checked = this.defaultChecked;}"

于 2010-11-01T14:37:24.680 回答

score -3 · Accepted Answer

如果您知道始终选中该复选框，则以下方法有效：

<input type="checkbox" name="Name" checked onchange='this.checked = true;'>

score -3 · Accepted Answer

在旧 HTML 中，您可以使用

<input type="checkbox" disabled checked>text

但实际上不建议只使用旧的 HTML，现在您应该使用 XHTML。

在格式良好的 XHTML 中，您必须使用

<input type="checkbox" disabled="disabled" checked="checked" />text <!-- if yu have a checked box-->
<input type="checkbox" disabled="disabled" />text <!-- if you have a unchecked box -->

格式良好的 XHTML 需要 XML 表单，这就是使用 disabled="disabled" 而不是简单地使用 disabled 的原因。

score -4 · Accepted Answer

-4

您始终可以使用看起来像复选框的小图像。

于 2008-09-30T22:17:59.950 回答

score -4 · Accepted Answer

试试这个使复选框只读，但不允许用户检查。这将让您发布复选框值。您需要选择复选框的默认状态为选中才能执行此操作。

<input type="checkbox" readonly="readonly" onclick="this.checked =! this.checked;">

如果您想要上述功能 + 不想接收复选框数据，请尝试以下操作：

<input type="checkbox" readonly="readonly" disabled="disabled" onclick="this.checked =! this.checked;">

希望有帮助。

score -4 · Accepted Answer

为什么不用顶部的空白 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;
}

score -4 · Accepted Answer

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

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

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

显示它们，让他们更改它们，但不要接受来自它们的新帖子数据。

score -5 · Accepted Answer

-5

不，但您也许可以使用 javascript 事件来实现类似的功能

于 2008-09-30T22:04:18.890 回答

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

47 回答 47

Related

Reference