如何确保<select>表单字段在禁用时提交？
我有一个select表单域，我想标记为“只读”，因为在用户不能修改的值，但价值仍然提交的forms。 使用disabled属性可防止用户更改该值，但不会将该值与表单一起提交。
readonly属性只能用于input和textarea字段，但基本上是我想要的。 有什么办法可以做到吗？
我正在考虑的两种可能性包括：
- 而不是禁用
select，禁用所有的option并使用CSS灰色select，所以它看起来像它的禁用。 - 向提交button添加一个点击事件处理程序，以便在提交表单之前启用所有禁用的下拉菜单。
<select disabled="disabled"> .... </select> <input type="hidden" name="select_name" value="selected value" />
其中select_name是您通常会给<select> 。
另一种select。
<select name="myselect" disabled="disabled"> <option value="myselectedvalue" selected="selected">My Value</option> .... </select> <input type="hidden" name="myselect" value="myselectedvalue" />
现在用这个，我已经注意到，根据你使用的是什么web服务器，你可能需要在<select>之前或之后放置hiddeninput。
如果我的记忆用IIS正确地服务我，你把它放在之前，用Apache把它放在后面。 一如既往，testing是关键。
禁用这些字段，然后在表单提交之前启用它们：
jQuery代码：
jQuery(function ($) { $('form').bind('submit', function () { $(this).find(':input').prop('disabled', false); }); });
我一直在寻找一个解决scheme，因为我没有find解决scheme，在这个线程我做了我自己的。
// With jQuery $('#selectbox').focus(function(e) { $(this).blur(); });
简单的说，当你关注它的时候，你只是模糊了这个领域，像禁用它，但是你实际上发送了它的数据。
它不能用于：select字段的inputselect器，使用这个：
jQuery(function() { jQuery('form').bind('submit', function() { jQuery(this).find(':disabled').removeAttr('disabled'); }); });
我遇到了一个稍微不同的场景，因为我只想让用户根据以前的select框更改选定的值。 我最终做的只是禁用select框中使用的所有其他非select的选项
$('#toSelect')find(':not(:selected)').attr('disabled','disabled');
Tres提出的同样的解决scheme，不使用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更不灵活。
我使用下一个代码来禁用选项
<select class="sel big" id="form_code" name="code" readonly="readonly"> <option value="user_played_game" selected="true">1 Game</option> <option value="coins" disabled="">2 Object</option> <option value="event" disabled="">3 Object</option> <option value="level" disabled="">4 Object</option> <option value="game" disabled="">5 Object</option> </select> // Disable selection for options $('select option:not(:selected)').each(function(){ $(this).attr('disabled', 'disabled'); });
提交之前只需添加一行。
$（ “＃XYZ”）removeAttr（ “禁用”）。
或者使用一些JavaScript来更改select的名称并将其设置为禁用。 这样select仍然被提交，但是使用一个你没有检查的名字。
我发现的最简单的方法是创build一个绑定到你的表单的小函数：
function enablePath() { document.getElementById('select_name').disabled= ""; }
你可以在这里用你的forms称呼它：
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">
或者你可以在你用来检查你的表单的函数中调用它:)
我find了一个可行的解决scheme：删除除了选定的元素之外的所有元素。 然后，您可以将样式更改为禁用的样式。 使用jQuery：
jQuery(function($) { $('form').submit(function(){ $('select option:not(:selected)', this).remove(); }); });
我掀起了一个快速（仅Jquery）插件，它可以在input被禁用时将值保存在数据字段中。 这只是意味着只要字段被禁用，通过jquery使用.prop（）或.attr（）…然后通过.val（），.serialize（）或.serializeArra（）访问值将始终返回值，即使禁用:)
无耻的插件： https ： //github.com/Jezternz/jq-disabled-inputs
基于乔丹的解决scheme，我创build了一个函数，自动创build一个隐藏的input与你想成为无效的select相同的名称和相同的值。 第一个参数可以是一个id或一个jQuery元素; 第二个是布尔可选参数，其中“真”禁用和“假”启用input。 如果省略，则第二个参数将在“启用”和“禁用”之间切换select。
function changeSelectUserManipulation(obj, disable){ var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj; disable = disable? !!disable : !$obj.is(':disabled'); if(disable){ $obj.prop('disabled', true) .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>"); }else{ $obj.prop('disabled', false) .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove(); } } changeSelectUserManipulation("select_id");
<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是使用readonly属性。
<select readonly="readonly"> .... </select>
随着只读的价值仍然提交，input字段是灰色的，用户不能编辑它。
编辑：
引自http://www.w3.org/TR/html401/interact/forms.html#adef-readonly ：
- 只读元素获得焦点，但不能被用户修改。
- Tab键导航中包含只读元素。
- 只读元素可能会成功。
当它表示元素可能成功时，则表示可能会提交该元素，如下所述： http : //www.w3.org/TR/html401/interact/forms.html#successful-controls
