我有一个select要标记为“只读”的表单字段，因为用户无法修改该值，但该值仍与表单一起提交。使用该disabled属性可防止用户更改值，但不会使用表单提交值。
该readonly属性仅适用于input和textarea字段，但这基本上就是我想要的。有什么办法可以使它正常工作吗？
我正在考虑的两种可能性包括：
- 而不是禁用
select，而是禁用所有，option并使用CSS将所选内容灰显，使其看起来像已禁用。 - 在提交按钮上添加一个单击事件处理程序，以便在提交表单之前启用所有禁用的下拉菜单。
<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放在后面。与往常一样，测试是关键。
禁用字段，然后在提交表单之前启用它们：
jQuery代码：
jQuery(function ($) {
$('form').bind('submit', function () {
$(this).find(':input').prop('disabled', false);
});
});
我一直在寻找解决方案，因为我没有在该线程中找到解决方案，所以我自己做了。
// With jQuery
$('#selectbox').focus(function(e) {
$(this).blur();
});
很简单，您只需要在关注该字段时就对其进行模糊处理，例如禁用它，但实际上是在发送其数据。
我面临的情况略有不同，因为我只希望不允许用户基于较早的选择框更改所选值。我最后要做的就是使用以下方式禁用选择框中的所有其他未选择的选项
$('#toSelect')find(':not(:selected)').attr('disabled','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灵活。
它不会与：input选择器用于选择字段一起使用，请使用以下命令：
jQuery(function() {
jQuery('form').bind('submit', function() {
jQuery(this).find(':disabled').removeAttr('disabled');
});
});
我使用下一个代码禁用选择中的选项
<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');
});
我发现最简单的方法是创建一个与您的表单绑定的小javascript函数：
function enablePath() {
document.getElementById('select_name').disabled= "";
}
然后以您的形式在此处调用它：
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">
或者，您可以在用于检查表格的函数中调用它：)
只需在提交前添加一行即可。
$（“＃XYZ”）。removeAttr（“ disabled”）;
或使用一些JavaScript更改选择的名称并将其设置为禁用。这样仍然可以提交选择，但是使用的是您未检查的名称。
我整理了一个快速（仅适用于Jquery）插件，该插件在禁用输入时将值保存在数据字段中。这仅意味着只要通过使用.prop（）或.attr（）的jquery以编程方式禁用该字段，然后通过.val（）、. serialize（）或.serializeArra（）访问该值将始终返回值，即使禁用:)
无耻的插件：https : //github.com/Jezternz/jq-disabled-inputs
基于Jordan的解决方案，我创建了一个函数，该函数自动创建一个隐藏的输入，该输入的名称和要失效的select的值相同。第一个参数可以是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");
我找到了一个可行的解决方案：删除除所选元素之外的所有元素。然后，您可以将样式更改为看起来也已禁用的样式。使用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");
}
另一种选择是使用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
文章标签：css , forms , html , html-select , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！
文件下载
评论已关闭！