首页 文章

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

提问于
浏览 次
157

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

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

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

  • 不是禁用 select ，而是禁用所有的 option 并使用CSS使select灰显，使其看起来像是禁用的 .

  • 向提交按钮添加单击事件处理程序，以便在提交表单之前启用所有已禁用的下拉菜单 .

javascript html css forms html-select

15 回答

  • 5
    <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> 之前或之后放置 hidden 输入 .

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

    回复于
  • 209

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

    jQuery代码：

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

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

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

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

    回复于
  • 5

    它不能用于选择字段的：input选择器，使用它：

    jQuery(function() {

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

    });
    回复于
  • 12

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

    $('#toSelect')find(':not(:selected)').attr('disabled','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灵活 .

    回复于
  • 6

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

    <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');
});
    回复于
  • 4

    只需在提交前添加一行 .

    $（“＃XYZ”） . removeAttr（“disabled”）;

    回复于
  • -6

    我找到的最简单的方法是创建一个与您的表单绑定的小javascript函数：

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

    你在这里用你的表格来称呼它：

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

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

    回复于
  • 106

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

    回复于
  • 0

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

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

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

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

    回复于
  • 1

    基于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");
    回复于
  • 2
    <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");
}
    回复于
  • 1

    另一种选择是使用readonly属性 .

    <select readonly="readonly">
    ....
</select>

    如果仍然提交了值，则输入字段将显示为灰色，用户无法对其进行编辑 .

    编辑：

    引自http://www.w3.org/TR/html401/interact/forms.html#adef-readonly：

    • 只读元素获得焦点但用户无法修改 .

    • 标签导航中包含只读元素 .

    • 只读元素可能成功 .

    当它说元素可能成功时，就意味着它可以被提交，如下所述：http://www.w3.org/TR/html401/interact/forms.html#successful-controls

    回复于

相关问题