我有一个选择表单字段,我想标记为“readonly”,因为用户不能修改该值,但该值仍然与表单一起提交。使用disabled属性可以防止用户更改值,但不会将值与表单一起提交。
readonly属性仅适用于输入和文本区域字段,但这基本上是我想要的。有办法让它工作吗?
我考虑的两种可能性包括:
不是禁用选择,而是禁用所有选项,并使用CSS将选择变成灰色,这样它看起来就像禁用了一样。 向提交按钮添加单击事件处理程序,以便在提交表单之前启用所有禁用的下拉菜单。
我有一个选择表单字段,我想标记为“readonly”,因为用户不能修改该值,但该值仍然与表单一起提交。使用disabled属性可以防止用户更改值,但不会将值与表单一起提交。
readonly属性仅适用于输入和文本区域字段,但这基本上是我想要的。有办法让它工作吗?
我考虑的两种可能性包括:
不是禁用选择,而是禁用所有选项,并使用CSS将选择变成灰色,这样它看起来就像禁用了一样。 向提交按钮添加单击事件处理程序,以便在提交表单之前启用所有禁用的下拉菜单。
当前回答
另一种选择是使用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
其他回答
<select id="example">
<option value="">please select</option>
<option value="0" >one</option>
<option value="1">two</option>
</select>
if (condition){
//you can't select
$("#example").find("option").css("display","none");
}else{
//you can select
$("#example").find("option").css("display","block");
}
<select disabled="disabled">
....
</select>
<input type="hidden" name="select_name" value="selected value" />
其中select_name是<select>通常使用的名称。
另一种选择。
<select name="myselect" disabled="disabled">
<option value="myselectedvalue" selected="selected">My Value</option>
....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />
现在有了这个,我注意到根据你使用的web服务器,你可能必须把隐藏输入放在<select>之前或之后。
如果我没记错的话,对于IIS,你把它放在前面,对于Apache,你把它放在后面。一如既往,测试是关键。
我制作了一个快速(Jquery only)插件,当输入被禁用时,将值保存在数据字段中。 这只是意味着,只要该字段通过jquery使用.prop()或.attr()被程序化禁用…然后通过.val(), .serialize()或.serializeArra()访问该值将始终返回该值,即使禁用:)
无耻插头:https://github.com/Jezternz/jq-disabled-inputs
与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灵活。
我发现最简单的方法是创建一个小的javascript函数绑定到你的表单:
function enablePath() {
document.getElementById('select_name').disabled= "";
}
你在这里的表格中称它为
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">
或者你可以在你用来检查你的表单的函数中调用它:)