Question

HTML：

<input type="radio" id="chkMain" name="chkMain"/>
<input type="radio" id="chkMain1" name="chkMain" />
<input type="radio" id="chkMain2" name="chkMain" />

<input class="child" type="checkbox" id="chk1" disabled="true" />
<input class="child" type="checkbox" id="chk2" disabled="true" />
<input class="child" type="checkbox" id="chk3" disabled="true" />
<input class="child" type="checkbox" id="chk4" disabled="true" />
<input class="child" type="checkbox" id="chk5" disabled="true" />
<input class="child" type="checkbox" id="chk6" disabled="true" />
<input class="child" type="checkbox" id="chk7" disabled="true" />

<input class="child1" type="radio" id="tone1" disabled="true"/>
<input class="child1" type="radio" id="tone2" disabled="true"/>
<input class="child1" type="radio" id="tone3" disabled="true"/>

使用Javascript：

$(function(){
    $("input:radio[id=checkMain]").click(function(){
        if (this.checked) {
            $("input:checkbox.child").removeAttr("disabled");
        }
        else {
             $("input:checkbox.child, input:radio.child1").attr("disabled", "enabled");

        }
    });
});

当我第一次点击id = checkMain然后点击id = checkMain1它完美地工作。但是当我第一次点击id = checkMain1然后在id = checkMain我希望child1被禁用

Answer 1

很简单 - 将值属性添加到单选按钮，如下所示：

<input type="radio" id="chkMain"  name="chkMain" value="main1"/>
<input type="radio" id="chkMain1" name="chkMain" value="main2"/>
<input type="radio" id="chkMain2" name="chkMain" value="main3"/>

比你的JQuery代码做了一些事情：

if( $('#chkMain').val() == 'main1' )
{
    $('.child').removeAttr('disabled');
    $('.child1').attr('disabled', 'disabled');
}
else
{
    $('.child').attr('disabled', disabled');
    $('.child1').removeAttr('disabled', 'disabled');
}

Answer 2

重写你的html：

<input type="radio" id="chkMain" name="chkMain"/>
<input type="radio" id="chkMain1" name="chkMain" />
<input type="radio" id="chkMain2" name="chkMain" />

<input class="child" type="checkbox" id="chk1" disabled="disabled" />
<input class="child" type="checkbox" id="chk2" disabled="disabled" />
<input class="child" type="checkbox" id="chk3" disabled="disabled" />
<input class="child" type="checkbox" id="chk4" disabled="disabled" />
<input class="child" type="checkbox" id="chk5" disabled="disabled" />
<input class="child" type="checkbox" id="chk6" disabled="disabled" />
<input class="child" type="checkbox" id="chk7" disabled="disabled" />

并且js喜欢这样：

$( function() {
    $( "input:radio[name='chkMain']" ).click( function() {
        if ( $( this ).attr( 'id' ) == 'chkMain' )
        {
            $("input.child").removeAttr( "disabled" );
        }
        else
        {
             $("input.child, input:radio.child1").attr( "disabled", true );

        }
    });
});

在此尝试：http://jsfiddle.net/X6JxC/2/

点击id = checkMain我希望“child”（复选框）启用，“child1”（单选按钮）被禁用

2 个答案: