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

时间:2020-03-06 14:57:01  来源:igfitidea点击:

我以为可以,但是由于我没有把钱花在嘴上(可以这么说),设置readonly属性实际上并没有任何作用。

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

解决方案

" READONLY"在复选框上不起作用,因为它阻止我们编辑字段的值,但是使用复选框实际上是在编辑字段的状态(开||关)

从faqs.org:

It's important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. In checkboxes, for example, you can check them on or off (thus setting the CHECKED state) but you don't change the value of the field.

如果我们不想使用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';
}

否,但是我们可以使用javascript事件来实现类似的功能

I just don't want the client to be able to change them under certain circumstances.

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

警告:如果将它们重新发布,则客户可以更改期限。我们不能依靠只读来阻止用户更改某些内容。可以始终使用提琴手,也可以只使用带萤火虫的html之类的东西。

这是我们无法更改的复选框:

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

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

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

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

但是,我的方法是使用禁用的(用户希望禁用的复选框不可编辑,而不是使用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" onclick="this.checked=!this.checked;">

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

将HTML复选框发布到服务器时,其字符串值为" on"或者"''。

只读不会停止用户编辑复选框,而已禁用则停止将值回发。
解决此问题的一种方法是使用隐藏元素存储实际值,并且显示的复选框是已禁用的虚拟对象。这样,复选框状态将在帖子之间保持不变。

这是执行此操作的功能。它使用字符串" T"或者" F",我们可以根据自己的喜好进行更改。这已在使用服务器端VB脚本的ASP页中使用。

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

在ASP页面的顶部,我们可以获取持久值...

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

当我们要输出复选框时,可以执行此操作...

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

我已经对此进行了测试,并且效果很好。它还不依赖JavaScript。

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

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

这有两个原因。首先也是最重要的一点是,用户将受益于看到他们可以更改的复选框与只读复选框之间的明显区别。禁用此功能。

第二个原因是浏览器内置了禁用状态,因此当用户单击某些内容时,我们需要执行的代码较少。这可能是个人喜好,而不是其他任何事情。提交表单时,我们仍然需要一些JavaScript才能停用这些功能。

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

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

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

复选框位于一个ID为" filters"的span元素中,代码的第二部分是jQuery语句,该语句迭代复选框并禁用每个复选框。这样,复选框值仍然通过表单提交(因为表单是在禁用它们之前提交的),并且它阻止用户更改它们,直到页面重新加载为止。

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

使用jQuery:

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

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

onclick="javascript: return false;"

最简单(在我看来):

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

人们希望使用只读复选框和(以及)只读无线电组的主要原因是,可以将无法更改的信息以其输入的形式呈现给用户。

确定已禁用可以执行此操作-不幸的是,已禁用的控件无法通过键盘导航,因此违反所有可访问性法规。这是我所知道的最大的HTML挂断。