使用 Jquery 限制带有父 html 选择器的复选框选择

Question

更新

我需要在同一页面的几个部分中限制复选框选择。所以我认为避免来自不同部分的输入冲突的最佳方法是将标签选择器<label data-addon-name="xxx"> 作为分隔符，因为 HTML 代码在输入之前已经为每个部分具有不同的标签，例如：<label data-addon-name="Opções">、@987654323 @ 等等。此外，每一个都必须有不同的复选框限制。

我有以下html代码：

HTML

    
<div class="wc-pao-addon-container  wc-pao-addon wc-pao-addon-opcoes" data-product-name="Marmitex">

    
                        <label for="addon-3913-opcoes-0" class="wc-pao-addon-name" data-addon-name="Opções" data-has-per-person-pricing="" data-has-per-block-pricing="">Opções </label>
                                <div class="wc-pao-addon-description"><p>Escolha no máximo 5</p>
</div>  
    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-0">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="arroz" data-label="Arroz"> Arroz </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-1">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="feijao-caldo" data-label="Feijão Caldo"> Feijão Caldo </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-2">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="feijao-farofa" data-label="Feijão Farofa"> Feijão Farofa </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-3">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="macarrao" data-label="Macarrão"> Macarrão </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-4">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="vinagrete" data-label="Vinagrete"> Vinagrete </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-5">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="pure" data-label="Purê"> Purê </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-6">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="salada-de-alface" data-label="Salada de Alface"> Salada de Alface </label>
    </p>

        
    <div class="clear"></div>
</div>

<div class="wc-pao-addon-container  wc-pao-addon wc-pao-addon-carnes" data-product-name="Marmitex">

    
                        <label for="addon-3913-carnes-1" class="wc-pao-addon-name" data-addon-name="Carnes" data-has-per-person-pricing="" data-has-per-block-pricing="">Carnes </label>
                                <div class="wc-pao-addon-description"><p>Escolha no máximo 3</p>
</div>  
    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-carnes-1-0">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-carnes-1[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="carne-assada" data-label="Carne Assada"> Carne Assada </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-carnes-1-1">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-carnes-1[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="carne-cozida" data-label="Carne Cozida"> Carne Cozida </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-carnes-1-2">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-carnes-1[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="frango-assado" data-label="Frango Assado"> Frango Assado </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-carnes-1-3">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-carnes-1[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="frango-cozido" data-label="Frango Cozido"> Frango Cozido </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-carnes-1-4">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-carnes-1[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="frango-frito" data-label="Frango Frito"> Frango Frito </label>
    </p>

    
    <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-carnes-1-5">
        <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-carnes-1[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="calabresa-assada" data-label="Calabresa Assada"> Calabresa Assada </label>
    </p>

        
    <div class="clear"></div>
</div>


            <input name="add-to-cart" type="hidden" value="3913"></form>

脚本

$("[data-addon-name='Opções'] > input").change(function() {
  var max = 2;
  if ($("[data-addon-name='Opções'] > input:checked").length == max) {
    $("[data-addon-name='Opções'] > input").attr('disabled', 'disabled');
    $("[data-addon-name='Opções'] > input:checked").removeAttr('disabled');
  } else {
    $("[data-addon-name='Opções'] > input").removeAttr('disabled');
  }
});

我做的另一个尝试是使用input[name=addon-3913-opcoes-0[]] ...，因为所有选择器的名称都相同，但它在控制台上返回错误。我不知道输入名称末尾的[] 是什么意思，我认为它是一个数组，但不知道如何使用它。我更喜欢第一个选项，使用父选择器，以使代码易于维护，但我也想知道如何使脚本与 [] 一起工作。

非常感谢！

Answer 1

您的 html 只有一个带有 data 属性 data-addon-name 的标签元素，只有一个，而且它根本没有任何后代，更不用说输入元素后代了。因此，您的 JS 没有意义。可能是下面的 JS 确实有意义：

$("div:has([data-addon-name='Opções']) input").change(function() {
  var max = 2;
  if ($("div:has([data-addon-name='Opções']) input:checked").length == max) {
    $("div:has([data-addon-name='Opções']) input").attr('disabled', 'disabled');
    $("div:has([data-addon-name='Opções']) input:checked").removeAttr('disabled');
  } else {
    $("div:has([data-addon-name='Opções']) input").removeAttr('disabled');
  }
});

var max = 2;
    var $inputs = $("div:has([data-addon-name='Opções']) input");
    $inputs.change(function() {
      if($inputs.filter(':checked').length == max) {
        $inputs.attr('disabled', 'disabled');
        $inputs.filter(':checked').removeAttr('disabled');
      } else {
        $inputs.removeAttr('disabled');
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="wc-pao-addon-container  wc-pao-addon wc-pao-addon-opcoes" data-product-name="Marmitex">

        <label for="addon-3913-opcoes-0" class="wc-pao-addon-name" data-addon-name="Opções" data-has-per-person-pricing="" data-has-per-block-pricing="">Opções </label>
        <div class="wc-pao-addon-description">
            <p>Escolha no máximo 5</p>
        </div>

        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-0">
            <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="arroz" data-label="Arroz"> Arroz </label>
        </p>


        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-1">
            <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="feijao-caldo" data-label="Feijão Caldo"> Feijão Caldo </label>
        </p>


        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-2">
            <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="feijao-farofa" data-label="Feijão Farofa"> Feijão Farofa </label>
        </p>


        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-3">
            <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="macarrao" data-label="Macarrão"> Macarrão </label>
        </p>


        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-4">
            <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="vinagrete" data-label="Vinagrete"> Vinagrete </label>
        </p>


        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-5">
            <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="pure" data-label="Purê"> Purê </label>
        </p>


        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-3913-opcoes-0-6">
            <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-3913-opcoes-0[]" data-raw-price="" data-price="" data-price-type="quantity_based" value="salada-de-alface" data-label="Salada de Alface"> Salada de Alface </label>
        </p>


        <div class="clear"></div>
    </div>