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

前端之家收集整理的这篇文章主要介绍了jQuery禁用基于选择的电台的选项(需要支持所有浏览器)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好,在这里有一点麻烦,想选择一个无线电时禁用一些选项。当选择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>

没有任何想法?

更新:

Ok我有启用/禁用工作,但一个新的问题已经出现。我的选择框的禁用选项仅在FF和IE8中有效。我已经测试IE6和禁用不工作。我试图使用hide()和show()没有运气。基本上我需要隐藏/禁用/删除选项(对于所有浏览器),并能够添加回来,如果其他无线电选项被选择,反之亦然。

结论:

感谢所有的解决方案,他们大多数回答我原来的问题。很多PROPS到所有:)

解决方法

实现所需功能的正确方法只是删除选项。当你发现困难的方式,禁用单个选项不支持特别好跨浏览器。我只是醒来,感觉像编程的东西,所以我鞭打了一个小插件,以轻松过滤选择基于无线电的所选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,值是应保留选择选项值的数组。有很多事情可以做,以抽象进一步,让我知道如果你有兴趣,我当然可以这样做。

Here is a demo of it in action

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

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.

原文链接:https://www.f2er.com/jquery/184543.html

猜你在找的jQuery相关文章