javascript - 使用 Jquery 周围的标签文本查找单选按钮和复选框名称

Question

我正在尝试使用 Jquery 完成以下任务:

当“选中”“无顶部”单选按钮时，它应该禁用并“取消选中”复选框选择中完成的任何选择。

如果用户选择另一个单选按钮选项，例如“Black Top”，则应再次启用复选框选择。

我正在尝试解决这个问题，但无法弄清楚如何使用标签文本找到正确的单选按钮或复选框(这就是我必须继续的)。我无法使用 ID，因为它始终以不同的名称呈现。

澄清: 第一个 div 类“option-box”包含单选集，然后跟随第二个 div 类“option-box”和复选框。 该页面有更多控件，包括单选按钮和复选框，但它只是我试图操作的第二个“选项类”内的复选框。

有什么IDE吗？

这是我的控件生成的代码(我无法修改):

<div class="option-box">
    <div class="radio">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl03_KitComponent_4_0" name="ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4" value="0" checked="checked" type="radio" />
            No Top
        </label>
    </div>
    <div class="radio">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl03_KitComponent_4_1" name="ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4" value="8" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4$1\',\'\')', 0)" type="radio" />
            Black Top
        </label>
    </div>
    <div class="radio">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl03_KitComponent_4_2" name="ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4" value="9" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4$2\',\'\')', 0)" type="radio" />
            White Top
        </label>
    </div>
    <div class="radio">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl03_KitComponent_4_3" name="ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4" value="10" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl03$KitComponent_4$3\',\'\')', 0)" type="radio" />
            Silver Top
        </label>
    </div>
</div>

<div class="option-box">
    <div class="checkbox">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl04_KitComponent_10_0" name="ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10$0" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10$0\',\'\')', 0)" value="11" type="checkbox" />
            Backdoor
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input id="ctl00_PageContent_ctl00_KitsList_ctl04_KitComponent_10_1" name="ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10$1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10$1\',\'\')', 0)" value="12" type="checkbox" />
            Topdoor
        </label>
    </div>
</div>

Answer 1

您可以通过输入的 type 属性来区分输入，如下所示:

$('.option-box input[type="radio"]').change(function() {
    $('.option-box input[type="checkbox"]').prop({
        'disabled': $(this).val() == "0", 
        'checked': false
    });
});

Example fiddle

如果页面中存在此 .option-box 结构的多个副本，您可以使用 DOM 遍历来查找与引发事件的结构相关的副本:

$('.option-box input[type="radio"]').change(function() {
    $(this).closest('.option-box').next('.option-box').find('input[type="checkbox"]').prop({
        'disabled': $(this).val() == "0", 
        'checked': false
    });
});

Example fiddle