你想要这样的东西 - 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","");
}
});
});
编辑：
代码的改进版本，使用正则表达式根据选项值过滤选项。 Working example here。您可以通过将 /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：
由于 disabled 属性似乎不能在浏览器中可靠地工作，我认为您唯一的选择是删除选择单选按钮时不需要的选项元素。 Working Example here
$(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);})
);
});
});
甚至
$(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);})
);
});
});