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

【问题标题】：How to ensure a <select> form field is submitted when it is disabled?如何确保在禁用时提交 <select> 表单字段？
【发布时间】：2010-11-14 12:51:24
【问题描述】：

我有一个select 表单字段，我想将其标记为“只读”，因为用户无法修改该值，但该值仍与表单一起提交。使用disabled 属性可防止用户更改值，但不会随表单提交值。

readonly 属性仅适用于input 和textarea 字段，但这基本上是我想要的。有什么办法可以让它工作吗？

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

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

【问题讨论】：

很抱歉加入晚了，但是@trafalmadorian 提供的解决方案效果最好。它禁用所有未选择的输入。如果它选择启用了多个选项，它也可以工作。 $('#toSelect')find(':not(:selected)').prop('disabled',true);
或者，您可以在 UI 上将控件保留为禁用，但在操作方法中检索值： public ActionResult InsertRecord(MyType model) { if (model.MyProperty == null) { model.MyProperty = 请求["我的属性"]; } }

标签： javascript html css forms html-select

【解决方案1】：

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

jQuery 代码：

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

【讨论】：

这是我选择的，主要是因为它最不显眼。
jQuery 文档建议使用 .prop 和 .removeProp 来表示“选中”、“选中”和“禁用”，而不是 .attr 和 .removeAttr see http://api.jquery.com/prop/
@JimBergman 评论的相关位 - “属性通常会影响 DOM 元素的动态状态，而不会更改序列化的 HTML 属性。示例包括输入元素的 value 属性，输入和按钮的 disabled 属性，或复选框的选中属性。应使用 .prop() 方法设置禁用和选中，而不是 .attr() 方法。应使用 .val() 方法获取和设置值。 - 来自api.jquery.com/prop
你是天才之一（Y）
这是我所知道的最不可思议的技巧之一。完美运行。谢谢。

【解决方案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，你把它放在后面。与往常一样，测试是关键。

【讨论】：

这将如何依赖于网络 服务器？ 不是 客户端 使用选择字段呈现页面，因此在在这种冲突的情况下，将由 client 决定是否将值发送到服务器？
这取决于服务器如何处理同名的多个输入。
你最好不要依赖特定的服务器类型，所以我认为第一种方法更干净，更不容易出错..
@Jordan：浏览器不会将禁用的字段值发送到服务器，这就是为什么当您尝试在服务器端处理它们时它们为空的原因。如果您有一个具有所需值的隐藏字段，并且可见字段被禁用，则只有隐藏字段将被发送到服务器。因此，只有在禁用可见字段且没有优先级问题时，才应创建隐藏字段（通过 JS 或服务器端代码）。
如果您需要一个无需 javascript 的表单，这是唯一的选择。

【解决方案3】：

我一直在寻找这个问题的解决方案，由于我在这个帖子中没有找到解决方案，所以我自己做了。

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

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

【讨论】：

哇伟大而简单的解决方案。谢谢.. +1 我 :)
我非常喜欢这个。根据表单中的交互，元素会前后启用/禁用...在这种情况下如何重新启用“模糊”字段？
从谷歌搜索，看起来像 $('#selectbox').off('focus');会做重新启用的伎俩
适用于文本框，不适用于选择框，而且通过单击并按住按钮非常容易绕过

【解决方案4】：

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

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

【讨论】：

谢谢，我发现你的最符合逻辑。但是attr 应该更改为prop，看起来像$('#toSelect')find(':not(:selected)').prop('disabled',true);

【解决方案5】：

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

    jQuery(function() {

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

    });

【讨论】：

【解决方案6】：

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

【讨论】：

但是，对于多个选择器来说并不好。也许我们可以使用getElementsByTagName('select')？

【解决方案7】：

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

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

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

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

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

【讨论】：

【解决方案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');
});

【讨论】：

【解决方案9】：

只需在提交前添加一行。

$("#XYZ").removeAttr("disabled");

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

无耻塞：https://github.com/Jezternz/jq-disabled-inputs

【讨论】：

【解决方案12】：

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

【讨论】：

'obj' 参数必须是 jquery 对象

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

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

【讨论】：

【解决方案15】：

另一种选择是使用只读属性。

<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

【讨论】：

控件未显示为灰色，用户可以对其进行编辑。您没有阅读整个部分，我引用：“以下元素支持只读属性：INPUT 和 TEXTAREA。”
我知道这是一个旧答案，但这确实有效。我不知道很多反对票的原因。