如何确保在禁用时提交<select>表单字段？

Question

我有一个select表单字段,我想标记为"只读",因为在用户无法修改值,但值仍然与表单一起提交.使用该disabled属性可防止用户更改值,但不会使用表单提交值.

该readonly属性仅适用于input和textarea字段,但这基本上就是我想要的.有没有办法让它工作？

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

• 而不是禁用select,禁用所有options并使用CSS灰显选择,使其看起来像禁用.
• 向提交按钮添加单击事件处理程序,以便在提交表单之前启用所有禁用的下拉菜单.

Answer 1

禁用字段,然后在提交表单之前启用它们:

jQuery代码:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

Answer 2

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

现在有了这个,我注意到,根据您使用的是什么网络服务器,您可能必须在hidden输入之前或之后输入<select>.

如果我的记忆正确地为我服务,使用IIS,你可以把它放在之前,用Apache把它放在后面.一如既往,测试是关键.

Answer 3

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

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

很简单,当你专注于它时,你只是模糊了字段,比如禁用它,但实际上你发送了它的数据.

Answer 4

我遇到了一个稍微不同的场景,因为我只是想不允许用户根据之前的选择框更改所选值.我最终做的只是禁用选择框中的所有其他未选择的选项

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');

Answer 5

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灵活.

Answer 6

它不能用于选择字段的:input选择器,使用它:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

Answer 7

我发现的最简单的方法是创建一个与您的表单相关联的小 javascript 函数：

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

你在这里以你的形式调用它：

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

或者您可以在用于检查表单的函数中调用它:)

Answer 8

我在选择中使用下一代码禁用选项

<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');
});