你想要这样的东西$(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到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");
});});
编辑2:
由于禁用的属性似乎不能跨浏览器可靠地工作,我认为您唯一的选择是删除选择单选按钮时不需要的选项元素。这里的工作示例$(function() {
$("input:radio[@name='abc123']").click(function() {
// store the option elements in an array
var options = [];
options[0] = '1';
options[1] = '2';
options[2] = '3';
options[3] = 'a';
options[4] = 'b';
options[5] = 'c';
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);})
);
});
});
甚至$(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);})
);
});
});