Question

我有一组单选按钮和一组通过PHP代码动态生成的选择框，但是我使用相同的类名作为相应的单选按钮，并选择框如。

<input type="radio" name="selop" class="1111" />
<select name="selval" class="1111"><options><!--All options--></options></select>
<input type="radio" name="selop" class="2222" />
<select name="selval" class="2222"><options><!--All options--></options></select>
<input type="radio" name="selop" class="3333" />
<select name="selval" class="3333"><options><!--All options--></options></select>
<input type="radio" name="selop" class="4444" />
<select name="selval" class="4444"><options><!--All options--></options></select>

在我的例子中，所有无线电的名称和所有选择框的名称相同，每组的类名相同。

我想如果有人检查了一个收音机，那么应该启用相同类的选择框，并且应该停用休息。

我试过这种方式对我不起作用。

var $radio = $('input[name=selop]:checked');
var cname = $radio.attr('class');
var classname = "." + cname;
$(classname).removeAttr('disabled');

Answer 1

尝试：

首先，当单选按钮状态改变时，将禁用的属性添加到所有选择框，然后删除特定选择框的属性

$(function () {
    $('input[name=selop]').on('change', function () {
        var $radio = $('input[name=selop]:checked');
        var cname = $radio.attr('class');
        var classname = "." + cname;
        //console.log(cname);
        $('select[name=selval]').attr('disabled', 'true');
        $(classname).removeAttr('disabled');
    });
});

http://jsfiddle.net/tamilcselvan/7KAXN/

Answer 2

这样的事情可能是：

  $(function(){
     $('input[type=radio]').on("change",function(){
     var classList=$(this).attr('class');
     var selector='select.'+classList;
     $(selector).attr('disabled',false);
     $('select').not(selector).attr('disabled',true);
   });  
});

演示：http://jsbin.com/voravaqu/1/edit

Answer 3

我的解决方案会禁用除已选中的选项以外的所有选择：http://jsfiddle.net/9dHqJ/

HTML：

<input type=radio name=selop>
<select disabled><option>Foo</option><option>Bar</option></select>

<input type=radio name=selop>
<select disabled><option>Foo</option><option>Bar</option></select>

<input type=radio name=selop>
<select disabled><option>Foo</option><option>Bar</option></select>

<input type=radio name=selop>
<select disabled><option>Foo</option><option>Bar</option></select>

JS：

$('input').change(function () {
    $('select').attr('disabled', true);
    $('input:checked + select').attr('disabled', false);
});

使用单选按钮启用或禁用选择框

3 个答案: