使用带有 Jquery 的周围标签文本查找单选框和复选框名称

Question

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

当 "No Top" 单选按钮为 "checked" 时，它应该禁用并且 "uncheck" 在复选框 selection 中完成的任何 selection。

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

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

说明：第一个 div class "option-box" 包含收音机，然后第二个 div class "option-box" 带有复选框。该页面有更多控件，包括单选框和复选框，但它只是第二个 "option-class" 我正在尝试操作的复选框。

有什么想法吗？

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

<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\',\'\')', 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\',\'\')', 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\',\'\')', 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[=11=]" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10[=11=]\',\'\')', 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" onclick="javascript:setTimeout('__doPostBack(\'ctl00$PageContent$ctl00$KitsList$ctl04$KitComponent_10\',\'\')', 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

Answer 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" );
    }
  });
});

Answer 3

我使用 input: 使其通用化，您可以使用 class 使其具体化。

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

使用带有 Jquery 的周围标签文本查找单选框和复选框名称

Find radio and checkbox name using surrounding labeltext with Jquery

javascript

checkbox

jquery

radio