jQuery 根据选中的 Radio 禁用 SELECT 选项（需要支持所有浏览器）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/877328/
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
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
提问by Phill Pafford
Okay having a bit of trouble here, wanted to disable some of the options when selecting a radio. When ABC is selected disable the 1,2 & 3 options, etc...
好的，这里有点麻烦，想在选择收音机时禁用一些选项。When ABC is selected disable the 1,2 & 3 options, etc...
$("input:radio[@name='abc123']").click(function() {
if($(this).val() == 'abc') {
// Disable
$("'theOptions' option[value='1']").attr("disabled","disabled");
$("'theOptions' option[value='2']").attr("disabled","disabled");
$("'theOptions' option[value='3']").attr("disabled","disabled");
} else {
// Disbale abc's
}
});
ABC: <input type="radio" name="abc123" id="abc"/>
123: <input type="radio" name="abc123" id="123"/>
<select id="theOptions">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Not working any ideas?
没有任何想法？
UPDATE:
更新：
Ok I got the enable/disable working but a new problem has arose. The disabled options for my select box only work in FF and IE8. I have tested IE6 and the disabled is not working. I have tried to use the hide() and show() with no luck either. basically I need to hide/disable/remove the options (for all browsers) and be able to add them back if the other radio option is selected and vice versa.
好的，我使启用/禁用工作正常，但出现了新问题。我的选择框的禁用选项仅适用于 FF 和 IE8。我已经测试了 IE6 并且禁用了不工作。我也尝试过使用 hide() 和 show() 也没有运气。基本上我需要隐藏/禁用/删除选项（对于所有浏览器），并且如果选择了其他单选选项，则能够将它们添加回来，反之亦然。
CONCLUSION:
结论：
Thanks for all the solutions, most of all of them answered my original question. Much PROPS to all :)
感谢所有的解决方案，他们中的大多数都回答了我原来的问题。给所有人很多道具:)
回答by Paolo Bergantino
The proper way to achieve the functionality you want is just to remove the options. As you discovered the hard way, disabling individual options is not supported particularly well across browsers. I just woke up and feel like programming something so I whipped up a small plugin to easily filter a select based on a radio's selected ID attribute. Although the rest of the solutions will get the job done, if you are planning on doing this throughout your app this should help. If not, then I guess it's for anyone else that stumbles upon this. Here is the plugin code you could stash away somewhere:
实现您想要的功能的正确方法就是删除选项。正如您发现的那样，在浏览器中并不能很好地支持禁用单个选项。我刚醒来，感觉想编程一些东西，所以我开发了一个小插件，可以根据收音机的选定 ID 属性轻松过滤选择。尽管其余的解决方案将完成工作，但如果您计划在整个应用程序中执行此操作，这应该会有所帮助。如果没有，那么我想这是其他任何人偶然发现的。这是您可以隐藏在某处的插件代码：
jQuery.fn.filterOn = function(radio, values) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(radio).click(function() {
var options = $(select).empty().data('options');
var haystack = values[$(this).attr('id')];
$.each(options, function(i) {
var option = options[i];
if($.inArray(option.value, haystack) !== -1) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
And here is how to use it:
这是如何使用它：
$(function() {
$('#theOptions').filterOn('input:radio[name=abc123]', {
'abc': ['a','b','c'],
'123': ['1','2','3']
});
});
The first argument is a selector for the radio group, the second a dictionary where the keys are the radio ID to match, and the value is an array of what select option values should remain. There's a lot of things that could be done to abstract this further, let me know if you are interested and I could certainly do that.
第一个参数是无线电组的选择器，第二个参数是字典，其中键是要匹配的无线电 ID，值是选择选项值应保留的数组。有很多事情可以做来进一步抽象，如果你有兴趣，请告诉我，我当然可以做到。
Here is a demo of it in action.
EDIT: Also, forgot to add, according to the jQuery documentation:
编辑：另外，忘记添加，根据 jQuery文档：
In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the '@' symbol from your selectors in order to make them work again.
在 jQuery 1.3 中 [@attr] 样式选择器被删除（它们之前在 jQuery 1.2 中被弃用）。只需从选择器中删除“@”符号即可使它们再次工作。
回答by Russ Cam
You want something like this - Example Code here
你想要这样的东西 -这里的示例代码
$(function() {
$("input:radio[@name='abc123']").click(function() {
if($(this).attr('id') == 'abc') {
// Disable 123 and Enable abc
$("#theOptions option[value='1']").attr("disabled","disabled");
$("#theOptions option[value='2']").attr("disabled","disabled");
$("#theOptions option[value='3']").attr("disabled","disabled");
$("#theOptions option[value='a']").attr("selected","selected");
$("#theOptions option[value='a']").attr("disabled","");
$("#theOptions option[value='b']").attr("disabled","");
$("#theOptions option[value='c']").attr("disabled","");
} else {
// Disable abc's and Enable 123
$("#theOptions option[value='a']").attr("disabled","disabled");
$("#theOptions option[value='b']").attr("disabled","disabled");
$("#theOptions option[value='c']").attr("disabled","disabled");
$("#theOptions option[value='1']").attr("selected","selected");
$("#theOptions option[value='1']").attr("disabled","");
$("#theOptions option[value='2']").attr("disabled","");
$("#theOptions option[value='3']").attr("disabled","");
}
});
});
EDIT:
编辑：
Improved version of the code, using regular expression to filter options based on option values. Working example here. You can edit the example by adding /editto the URL
代码的改进版本，使用正则表达式根据选项值过滤选项。工作示例在这里。您可以通过添加/edit到 URL来编辑示例
$(function() {
$("input:radio[@name='abc123']").click(function() {
// get the id of the selected radio
var radio = $(this).attr('id');
// set variables based on value of radio
var regexDisabled = radio == 'abc' ? /[1-3]/ : /[a-c]/;
var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/;
var selection = radio == 'abc' ? 'a' : 1;
// select all option elements who are children of id #theOptions
$("#theOptions option")
// filter the option elements to only those we want to disable
.filter( function() { return this.value.match(regexDisabled);})
// disable them
.attr("disabled","disabled")
// return to the previous wrapped set i.e. all option elements
.end()
// and filter to those option elements we want to enable
.filter( function() { return this.value.match(regexEnabled);})
// enable them
.attr("disabled","");
// change the selected option element in the dropdown
$("#theOptions option[value='" + selection + "']").attr("selected","selected");
});
});
EDIT 2:
编辑2：
Since the disabled attribute doesn't appear to work reliably across browsers, I think your only option is to remove the option elements not needed when a radio button is selected. Working Example here
由于 disabled 属性似乎不能跨浏览器可靠地工作，我认为您唯一的选择是删除选择单选按钮时不需要的选项元素。工作示例在这里
$(function() {
$("input:radio[@name='abc123']").click(function() {
// store the option elements in an array
var options = [];
options[0] = '<option value="1">1</option>';
options[1] = '<option value="2">2</option>';
options[2] = '<option value="3">3</option>';
options[3] = '<option value="a">a</option>';
options[4] = '<option value="b">b</option>';
options[5] = '<option value="c">c</option>';
var radio = $(this).attr('id');
var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/;
// set the option elements in #theOptions to those that match the regular expression
$("#theOptions").html(
$(options.join(''))
// filter the option elements to only those we want to include in the dropdown
.filter( function() { return this.value.match(regexEnabled);})
);
});
});
or even
甚至
$(function() {
// get the child elements of the dropdown when the DOM has loaded
var options = $("#theOptions").children('option');
$("input:radio[@name='abc123']").click(function() {
var radio = $(this).attr('id');
var regexEnabled = radio == 'abc' ? /[a-c]/ : /[1-3]/;
// set the option elements in #theOptions to those that match the regular expression
$("#theOptions").html(
$(options)
// filter the option elements to only those we want to include in the dropdown
.filter( function() { return this.value.match(regexEnabled);})
);
});
});
回答by TheVillageIdiot
the first problem is with
第一个问题是
$(this).val()
replace it with
将其替换为
$(this).attr('id') == 'abc'
then this will not work
那么这将不起作用
$("'theOptions'..")
use
用
$("#theOptions option[value='1']").attr('disabled','disabled') //to disable
$("#theOptions option[value='a']").attr('disabled','') //to ENABLE
回答by Temple
which browser are you using? I've never used it before but it seems to be unsupported in IE before IE8. See this link for more information:
你用的是哪个浏览器？我以前从未使用过它，但在 IE8 之前的 IE 中似乎不支持它。有关更多信息，请参阅此链接：
回答by Ronald Wildenberg
Your selector is wrong. Instead of
你的选择器是错误的。代替
$("'theOptions' option[value='1']")
you should use
你应该使用
$("#theOptions > option[value='1']")
See also the jQuery selectors documentation. And take a look at the suggestionby aman.tur.
回答by Rafael
If you want to disable some options, than the code below should work
如果你想禁用一些选项，下面的代码应该可以工作
$("input:radio[name='abc123']").click(function() {
var value = $(this).val();
$("option[value='1'], option[value='2'], option[value='3']", "#theOptions").each(function(){
this.disabled = value == 'abc';
});
$("option[value='a'], option[value='b'], option[value='c']", "#theOptions").each(function(){
this.disabled = value == '123';
})
});
and the radio-buttons
和单选按钮
ABC: <input type="radio" name="abc123" value="abc" id="abc"/>
123: <input type="radio" name="abc123" value="123" id="123"/>
If you want to remove the options from select list, than use this code
如果要从选择列表中删除选项，请使用此代码
$(function(){
var options = null;
$("input:radio[name='abc123']").click(function() {
var value = $(this).val();
if(options != null)options.appendTo('#theOptions');
if(value == 'abc' )
options = $("option[value='1'], option[value='2'], option[value='3']", "#theOptions").remove();
else if(value == '123')
options = $("option[value='a'], option[value='b'], option[value='c']", "#theOptions").remove();
});
});
BTW. my code uses current stable release of jQuery (1.3.2). If you are using older release, you will need to change the attribute selectors to old syntax.
顺便提一句。我的代码使用当前稳定版本的 jQuery (1.3.2)。如果您使用的是旧版本，则需要将属性选择器更改为旧语法。
option[value='1'] to option[@value='1']
选项 [value='1'] 到选项 [@value='1']
回答by duckyflip
$(":radio[name=abc123]").click(function() {
var $options = $("#theOptions")
var toggle = ($(this).val() == 'abc') ? true : false;
$("[value=1],[value=2],[value=3]", $options).attr("disabled", toggle);
$("[value=a],[value=b],[value=c]", $options).attr("disabled", !toggle);
});
回答by jamil
just fix the selector $("'theOptions' option[value='1']")to
$("#theOptions option[value='1']")and everything will work fine
只需将选择器修复$("'theOptions' option[value='1']")为
$("#theOptions option[value='1']")，一切都会正常工作
