jQuery根据所选的Radio禁用SELECT选项(需要支持所有浏览器) [英] jQuery disable SELECT options based on Radio selected (Need support for all browsers)
问题描述
好吧，这里有点麻烦，想在选择收音机时禁用某些选项.当ABC选择禁用1,2-&安培; 3个选项，等等...
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...
$("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>
没有任何想法吗?
更新:
好的，我启用/禁用了，但是出现了一个新问题.我的选择框的禁用选项仅在FF和IE8中有效.我已经测试了IE6，并且已禁用.我试过使用hide()和show()都没有运气.基本上，我需要隐藏/禁用/删除这些选项(对于所有浏览器)，并且如果选择了其他单选选项，并且能够将它们重新添加回去，反之亦然.
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.
结论:
感谢所有解决方案，其中大多数回答了我最初的问题.对所有人都有很多支持:)
Thanks for all the solutions, most of all of them answered my original question. Much PROPS to all :)
推荐答案
实现所需功能的正确方法是删除选项.如您所知，很难在各个浏览器之间很好地支持禁用单个选项.我刚醒来，就喜欢编程，于是我拨出了一个小插件，可以轻松地根据电台的选定ID属性过滤选择内容.尽管其余解决方案可以完成工作，但如果您打算在整个应用程序中这样做，则应该会有所帮助.如果不是这样，那么我猜想是其他人偶然发现的.这是您可以藏在某个地方的插件代码:
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:
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)
);
}
});
});
});
};
这是使用方法:
$(function() {
$('#theOptions').filterOn('input:radio[name=abc123]', {
'abc': ['a','b','c'],
'123': ['1','2','3']
});
});
第一个参数是无线电组的选择器，第二个参数是字典，其中的键是要匹配的无线电ID，值是应该保留哪些选择选项值的数组.有很多事情可以做来进一步抽象，如果您有兴趣，请告诉我，我当然可以做到.
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.
编辑:根据jQuery 文档，也忘记添加:
EDIT: Also, forgot to add, according to the jQuery documentation:
在jQuery 1.3中，删除了[@attr]样式选择器(它们在jQuery 1.2中已被弃用).只需从选择器中删除"@"符号，即可使其再次工作.
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根据所选的Radio禁用SELECT选项(需要支持所有浏览器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
