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

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

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

现在有了这个，我注意到根据您使用的网络服务器，您可能必须将 hidden 输入放在 <select> 之前或之后。

如果我没记错的话，用 IIS，你把它放在前面，用 Apache 你把它放在后面。与往常一样，测试是关键。

---

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

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

很简单，当你专注于它时，你只是模糊了这个领域，比如禁用它，但你实际上发送了它的数据。

---

它不适用于选择字段的 :input 选择器，请使用：

    jQuery(function() {

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

    });

---

我遇到了一个稍微不同的场景，我只想不允许用户根据早期的选择框更改选定的值。我最终做的只是使用禁用选择框中的所有其他未选择选项

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

---

Same solution suggested by 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();">

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

---

我使用下一个代码来禁用选择中的选项

<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("disabled");

---

或者使用一些 JavaScript 来更改选择的名称并将其设置为禁用。这种方式仍然提交选择，但使用您未检查的名称。

---

我创建了一个快速（仅限 Jquery）插件，它在禁用输入时将值保存在数据字段中。这只是意味着只要通过 jquery 使用 .prop() 或 .attr() 以编程方式禁用该字段...然后通过 .val()、.serialize() 或 .serializeArra() 访问该值将始终返回即使禁用也值:)

无耻的插头：https://github.com/Jezternz/jq-disabled-inputs

---

基于 Jordan 的解决方案，我创建了一个函数，该函数会自动创建一个隐藏的输入，该输入具有相同的名称和相同的值，并且选择要变为无效。第一个参数可以是id或者jquery元素；第二个是布尔可选参数，其中“true”禁用输入，“false”启用输入。如果省略，则第二个参数在“启用”和“禁用”之间切换选择。

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");

---

我找到了一个可行的解决方案：删除除所选元素之外的所有元素。然后，您可以将样式更改为看起来也已禁用的样式。使用 jQuery：

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

---

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

---