如何确保一个<选择>表单字段被禁用时提交吗?

小开

最佳答案

<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服务器，你可能必须将hidden输入放在<select>之前或之后。

如果我没记错的话，对于IIS，你把它放在前面，对于Apache，你把它放在后面。一如既往，测试是关键。

小开

或者使用一些JavaScript更改选择的名称，并将其设置为禁用。这样，选择仍然被提交，但是使用了一个您不检查的名称。

小开

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

jQuery代码:

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

小开

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

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

对于readonly，值仍然被提交，输入字段是灰色的，用户不能编辑它。

编辑:

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

只读元素接收焦点，但用户不能修改。
选项卡导航中包含只读元素。
只读元素可能会成功。

当它说元素可能是成功的，这意味着它五月被提交，如这里所述

小开

我找到了一个可行的解决方案:删除所有的元素，除了选中的元素。然后，您可以将样式更改为看起来也不完善的样式。使用jQuery: < / p >

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

小开

与特雷斯提出的解决方案相同没有使用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();">

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

小开

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

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

很简单，当你关注它的时候，你只是模糊了这个域，就像禁用它一样，但是你实际上发送了它的数据。

小开

我使用next代码禁用选择中的选项

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

小开

对于选择字段，它不能使用:input选择器，使用这个:

    jQuery(function() {


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


});

小开

在提交前添加一行即可。

$ (" # XYZ”).removeAttr(“禁用”);< / p >

小开

我遇到了一个略有不同的场景，在这种场景中，我只想不允许用户根据先前的选择框更改所选值。我最终所做的只是禁用所有其他非选择选项在选择框使用

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

小开

我鞭打了一个快速(Jquery only)插件，它保存在一个数据字段的值，而输入是禁用的。这只是意味着，只要该字段通过jquery使用.prop()或.attr()被程序化禁用…然后通过.val()， .serialize()或.serializeArra()访问该值将始终返回该值，即使禁用:)

https://github.com/Jezternz/jq-disabled-inputs

小开

基于Jordan的解决方案，我创建了一个函数，它自动创建一个隐藏输入，该输入具有与您希望无效的select相同的名称和相同的值。第一个参数可以是id或者jquery元素;第二个是布尔可选参数，其中“true”禁用输入，“false”启用输入。如果省略，第二个参数将在“enabled”和“disabled”之间切换选择。

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