html 禁止选中单选按钮,jQuery禁用基于Radio选择的SELECT选项(需要支持所有浏览器)...

你想要这样的东西$(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);})

);

});

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值