为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery禁用基于Radio选择的SELECT选项(需要支持所有浏览器)

jQuery禁用基于Radio选择的SELECT选项(需要支持所有浏览器)

胡子哥哥 2019-08-27 13:09:41
jQuery禁用基于Radio选择的SELECT选项(需要支持所有浏览器)好的,在这里遇到一些麻烦,想在选择收音机时禁用一些选项。选择ABC时,禁用1,2和3选项等...$("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()也没有运气。基本上我需要隐藏/禁用/删除选项(适用于所有浏览器),并且如果选择了其他无线电选项则能够将它们添加回来,反之亦然。结论:感谢所有解决方案,他们中的大多数都回答了我原来的问题。对所有人提出了很多建议:)
查看完整描述

3 回答

?
哔哔one

TA贡献1854条经验 获得超8个赞

实现所需功能的正确方法是删除选项。正如您发现的那样,在浏览器中不支持禁用单个选项。我刚刚醒来,觉得自己喜欢编程,所以我掀起了一个小插件,可以根据收音机选择的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)
                    );
                }
            });
        });            
    });};

以下是如何使用它:

$(function() {
    $('#theOptions').filterOn('input:radio[name=abc123]', {
        'abc': ['a','b','c'],
        '123': ['1','2','3']        
    });});

第一个参数是无线电组的选择器,第二个参数是字典,其中键是要匹配的无线电ID,值是应保留的选项值的数组。有很多事情可以做进一步抽象,让我知道你是否感兴趣,我当然可以这样做。

这是它的实际演示。

编辑:另外,忘了添加,根据jQuery 文档:

在jQuery 1.3 [@attr]样式选择器被删除(它们之前在jQuery 1.2中被弃用)。只需从选择器中删除“@”符号,以便再次使用它们。


查看完整回答
反对 回复 2019-08-27
?
慕盖茨4494581

TA贡献1850条经验 获得超11个赞


第一个问题是

$(this).val()

用它替换它

$(this).attr('id') == 'abc'

那么这不会奏效

$("'theOptions'..")

使用

$("#theOptions option[value='1']").attr('disabled','disabled') //to disable
$("#theOptions option[value='a']").attr('disabled','') //to ENABLE


查看完整回答
反对 回复 2019-08-27
  • 3 回答
  • 0 关注
  • 869 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信