我有一个选择表单字段,我想标记为“readonly”,因为用户不能修改该值,但该值仍然与表单一起提交。使用disabled属性可以防止用户更改值,但不会将值与表单一起提交。
readonly属性仅适用于输入和文本区域字段,但这基本上是我想要的。有办法让它工作吗?
我考虑的两种可能性包括:
不是禁用选择,而是禁用所有选项,并使用CSS将选择变成灰色,这样它看起来就像禁用了一样。 向提交按钮添加单击事件处理程序,以便在提交表单之前启用所有禁用的下拉菜单。
我有一个选择表单字段,我想标记为“readonly”,因为用户不能修改该值,但该值仍然与表单一起提交。使用disabled属性可以防止用户更改值,但不会将值与表单一起提交。
readonly属性仅适用于输入和文本区域字段,但这基本上是我想要的。有办法让它工作吗?
我考虑的两种可能性包括:
不是禁用选择,而是禁用所有选项,并使用CSS将选择变成灰色,这样它看起来就像禁用了一样。 向提交按钮添加单击事件处理程序,以便在提交表单之前启用所有禁用的下拉菜单。
当前回答
禁用字段,然后在表单提交之前启用它们:
jQuery代码:
jQuery(function ($) {
$('form').bind('submit', function () {
$(this).find(':input').prop('disabled', false);
});
});
其他回答
<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");
}
我找到了一个可行的解决方案:删除所有的元素,除了选中的元素。然后,您可以将样式更改为看起来也不完善的样式。 使用jQuery:
jQuery(function($) {
$('form').submit(function(){
$('select option:not(:selected)', this).remove();
});
});
禁用字段,然后在表单提交之前启用它们:
jQuery代码:
jQuery(function ($) {
$('form').bind('submit', function () {
$(this).find(':input').prop('disabled', false);
});
});
<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,你把它放在后面。一如既往,测试是关键。
我一直在寻找一个解决方案,因为我没有找到一个解决方案在这个线程我做了我自己。
// With jQuery
$('#selectbox').focus(function(e) {
$(this).blur();
});
很简单,当你关注它的时候,你只是模糊了这个域,就像禁用它一样,但是你实际上发送了它的数据。