我有一个选择表单字段,我想标记为“readonly”,因为用户不能修改该值,但该值仍然与表单一起提交。使用disabled属性可以防止用户更改值,但不会将值与表单一起提交。
readonly属性仅适用于输入和文本区域字段,但这基本上是我想要的。有办法让它工作吗?
我考虑的两种可能性包括:
不是禁用选择,而是禁用所有选项,并使用CSS将选择变成灰色,这样它看起来就像禁用了一样。 向提交按钮添加单击事件处理程序,以便在提交表单之前启用所有禁用的下拉菜单。
我有一个选择表单字段,我想标记为“readonly”,因为用户不能修改该值,但该值仍然与表单一起提交。使用disabled属性可以防止用户更改值,但不会将值与表单一起提交。
readonly属性仅适用于输入和文本区域字段,但这基本上是我想要的。有办法让它工作吗?
我考虑的两种可能性包括:
不是禁用选择,而是禁用所有选项,并使用CSS将选择变成灰色,这样它看起来就像禁用了一样。 向提交按钮添加单击事件处理程序,以便在提交表单之前启用所有禁用的下拉菜单。
当前回答
我发现最简单的方法是创建一个小的javascript函数绑定到你的表单:
function enablePath() {
document.getElementById('select_name').disabled= "";
}
你在这里的表格中称它为
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">
或者你可以在你用来检查你的表单的函数中调用它:)
其他回答
我遇到了一个略有不同的场景,在这种场景中,我只想不允许用户根据先前的选择框更改所选值。我最终所做的只是禁用所有其他非选择选项在选择框使用
$('#toSelect').find(':not(:selected)').prop('disabled',true);
我找到了一个可行的解决方案:删除所有的元素,除了选中的元素。然后,您可以将样式更改为看起来也不完善的样式。 使用jQuery:
jQuery(function($) {
$('form').submit(function(){
$('select option:not(:selected)', this).remove();
});
});
禁用字段,然后在表单提交之前启用它们:
jQuery代码:
jQuery(function ($) {
$('form').bind('submit', function () {
$(this).find(':input').prop('disabled', false);
});
});
对于选择字段,它不能使用: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灵活。