我有一个选择表单字段,我想标记为“readonly”,因为用户不能修改该值,但该值仍然与表单一起提交。使用disabled属性可以防止用户更改值,但不会将值与表单一起提交。

readonly属性仅适用于输入和文本区域字段,但这基本上是我想要的。有办法让它工作吗?

我考虑的两种可能性包括:

不是禁用选择,而是禁用所有选项,并使用CSS将选择变成灰色,这样它看起来就像禁用了一样。 向提交按钮添加单击事件处理程序,以便在提交表单之前启用所有禁用的下拉菜单。


当前回答

我找到了一个可行的解决方案:删除所有的元素,除了选中的元素。然后,您可以将样式更改为看起来也不完善的样式。 使用jQuery:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

其他回答

在提交前添加一行即可。

$(“#XYZ”).removeAttr(“disabled”);

与Tres建议的解决方案相同,但不使用jQuery

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

这可能有助于人们更好地理解,但显然不如jQuery灵活。

我找到了一个可行的解决方案:删除所有的元素,除了选中的元素。然后,您可以将样式更改为看起来也不完善的样式。 使用jQuery:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

我一直在寻找一个解决方案,因为我没有找到一个解决方案在这个线程我做了我自己。

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

很简单,当你关注它的时候,你只是模糊了这个域,就像禁用它一样,但是你实际上发送了它的数据。

另一种选择是使用readonly属性。

<select readonly="readonly">
    ....
</select>

对于readonly,值仍然被提交,输入字段是灰色的,用户不能编辑它。

编辑:

引自http://www.w3.org/TR/html401/interact/forms.html#adef-readonly:

只读元素接收焦点,但用户不能修改。 选项卡导航中包含只读元素。 只读元素可能会成功。

当它说元素可能成功时,这意味着它可能被提交,如这里所述:http://www.w3.org/TR/html401/interact/forms.html#successful-controls