如何使 html <select> 元素看起来像“禁用”，但传递值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12769664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make html <select> element look like "disabled", but pass values?
提问by el Dude
When I'm disabling a
当我禁用一个
<select name="sel" disabled>
<option>123</option>
</select>
element, it doesnt pass its variable.
元素，它不传递它的变量。
What to do to look it like disabled, but be in "normal" state?
怎么做才能让它看起来像残疾人，但处于“正常”状态？
This is because I have a list of "selects", and sometimes some of them have single value, so user should understand that it has only one value without clicking it.
这是因为我有一个“选择”列表，有时其中一些只有一个值，所以用户应该明白它只有一个值而不点击它。
回答by tomaroo
You can keep it disabled as desired, and then remove the disabled attribute before the form is submitted.
您可以根据需要将其禁用，然后在提交表单之前删除禁用属性。
$('#myForm').submit(function() {
$('select').removeAttr('disabled');
});
Note that if you rely on this method, you'll want to disable it programmatically as well, because if JS is disabled or not supported, you'll be stuck with the disabled select.
请注意，如果您依赖此方法，您还需要以编程方式禁用它，因为如果 JS 被禁用或不受支持，您将被禁用选择卡住。
$(document).ready(function() {
$('select').attr('disabled', 'disabled');
});
回答by dingyuchi
<select id="test" name="sel">
<option disabled>1</option>
<option disabled>2</option>
</select>
or you can use jQuery
或者你可以使用 jQuery
$("#test option:not(:selected)").prop("disabled", true);
回答by Denis Priebe
My solution was to create a disabled class in CSS:
我的解决方案是在 CSS 中创建一个禁用的类：
.disabled {
pointer-events: none;
cursor: not-allowed;
}
and then your select would be:
然后您的选择将是：
<select name="sel" class="disabled">
<option>123</option>
</select>
The user would be unable to pick any values but the select value would still be passed on form submission.
用户将无法选择任何值，但仍会在提交表单时传递选择值。
回答by Kirito
If you can supply a default value for your selects, then you can use the same approach for unchecked check boxes which requires a hidden input before the actual element, as these don't post a value if left unchecked:
如果您可以为您的选择提供默认值，那么您可以对未选中的复选框使用相同的方法，这需要在实际元素之前隐藏输入，因为如果未选中，它们不会发布值：
<input type="hidden" name="myfield" value="default" />
<select name="myfield">
<option value="default" selected="selected">Default</option>
<option value="othervalue">Other value</option>
<!-- ... //-->
</select>
This will actually post the value "default" (without quotes, obviously) if the select is disabled by javascript (or jQuery) or even if your code writes the html disabling the element itself with the attribute: disabled="disabled".
如果 javascript（或 jQuery）禁用了选择，或者即使您的代码编写了 html 禁用元素本身的属性：disabled="disabled"，这实际上会发布值“default”（显然没有引号）。
回答by Praveen Kumar Purushothaman
Add a class .disabledand use this CSS:
添加一个类.disabled并使用这个CSS：
?.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}?
Demo: http://jsfiddle.net/ZCSRq/
演示：http: //jsfiddle.net/ZCSRq/
回答by user3654478
One could use an additional hidden input element with the same name and value as that of the disabled list. This will ensure that the value is passed in $_POST variables.
可以使用与禁用列表具有相同名称和值的附加隐藏输入元素。这将确保该值在 $_POST 变量中传递。
Eg:
例如：
<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>回答by user3290525
Wow, I had the same problem, but a line of code resolved my problem. I wrote
哇，我遇到了同样的问题，但是一行代码解决了我的问题。我写
$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false ); //This seems to work on mine
I send the form to a php script then it prints the correct value for each options while it was "null" before.
我将表单发送到一个 php 脚本，然后它为每个选项打印正确的值，而之前它是“空”。
Tell me if this works out. I wonder if this only works on mine somehow.
告诉我这是否有效。我想知道这是否只适用于我的。
回答by Robert Blasco Villarroya
if you don't want add the attr disabled can do it programmatically
如果您不想添加禁用的 attr 可以以编程方式进行
can disable the edition into the <select class="yourClass">element with this code:
可以<select class="yourClass">使用以下代码禁用元素的编辑：
//bloqueo selects
//block all selects
jQuery(document).on("focusin", 'select.yourClass', function (event) {
var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
});
if you want try it can see it here: https://jsfiddle.net/9kjqjLyq/
如果你想尝试它可以在这里看到它：https: //jsfiddle.net/9kjqjLyq/
