使用 Jquery 周围的 labeltext 查找单选和复选框名称答案

【问题标题】：Find radio and checkbox name using surrounding labeltext with Jquery使用 Jquery 周围的 labeltext 查找单选和复选框名称
【发布时间】：2016-02-17 10:24:16
【问题描述】：

我正在尝试使用 Jquery 完成以下操作：

当“无顶部”单选按钮被“选中”时，它应该禁用和“取消选中”复选框选择中所做的任何选择。

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

我正在尝试解决这个问题，但不知道如何使用标签文本找到正确的单选按钮或复选框（这就是我必须继续进行的全部内容）。我不能使用 ID，因为它总是以不同的名称呈现。

澄清：第一个 div 类“option-box”包含收音机集，然后是带有复选框的第二个 div 类“option-box”。该页面有更多控件，包括单选和复选框，但它只是我试图操作的第二个“选项类”中的复选框。

有什么办法吗？

这是我的控件生成的代码（我无法修改）：

<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>

【问题讨论】：

感谢所有回答，Rory McCrossan 解决方案对我来说效果最好。

标签： javascript jquery checkbox radio

【解决方案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

【讨论】：

这不起作用，问题是页面包含更多带有单选和复选框的控件，我必须使用标签文本选择正确的控件。每次唯一相同的是单选标签的“No Top”，然后复选框区域紧跟在单选按钮组之后（如发布的代码中所示）。
了解原始问题中的此类信息会很有帮助。我已经为你更新了答案。
您的解决方案很好地解决了一个小问题：单选按钮的每次更改都会取消选中所有复选框，而不仅仅是在选择“No Top”时。如果您有时间解决这个问题，对我很有帮助，谢谢！
没问题：jsfiddle.net/hn4z4hbL/2。不要忘记投票并接受答案。

【解决方案2】：

如果你不能使用任何 id 或输入 VALUE，你可以这样尝试

$(document).ready(function () {
  $( '.option-box' ).on( 'click', 'input[type="radio"]', function() {
    var labelContent = $( this ).parents(".radio").find( "label" ).html();
    if( labelContent.indexOf( "No Top" ) > -1 ) {
      $( ".checkbox input" ).attr( "disabled", "disabled" ).removeAttr( "checked" );
    } else {
      $( ".checkbox input" ).removeAttr( "disabled" );
    }
  });
});

【讨论】：

【解决方案3】：

我使用input: 将其设为通用，您可以使用类使其具体化。

$(document).on("click","input:radio",function(){
    if($(this).val() > 0){
        $("input:checkbox").attr("disabled",false);
    } else {
        $("input:checkbox").attr("disabled",true);
        $("input:checkbox").attr("checked",false);
    }
});

$(document).ready(function(){
    if($("input:radio").val() > 0){
        $("input:checkbox").attr("disabled",false);
    } else {
        $("input:checkbox").attr("disabled",true);
        $("input:checkbox").attr("checked",false);
    }
});

Fiddle Demo

【讨论】：