15 回答
禁用字段,然后在提交表单之前启用它们:
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();
});
很简单,当你专注于它时,你只是模糊了这个领域,比如禁用它,但你实际上发送了它的数据。
我遇到了一个稍微不同的场景,我只想不允许用户根据早期的选择框更改选定的值。我最终做的只是使用禁用选择框中的所有其他未选择选项
$('#toSelect').find(':not(:selected)').prop('disabled',true);
它不适用于选择字段的 :input 选择器,请使用:
jQuery(function() {
jQuery('form').bind('submit', function() {
jQuery(this).find(':disabled').removeAttr('disabled');
});
});
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");
基于 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");
或者使用一些 JavaScript 来更改选择的名称并将其设置为禁用。这种方式仍然提交选择,但使用您未检查的名称。
我创建了一个快速(仅限 Jquery)插件,它在禁用输入时将值保存在数据字段中。这只是意味着只要通过 jquery 使用 .prop() 或 .attr() 以编程方式禁用该字段...然后通过 .val()、.serialize() 或 .serializeArra() 访问该值将始终返回即使禁用也值:)
我找到了一个可行的解决方案:删除除所选元素之外的所有元素。然后,您可以将样式更改为看起来也已禁用的样式。使用 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