Using Jquery to limit checkbox selection with parent html selectors

Question

UPDATE

I need to restrict the checkbox selection in a couple of sections in the same page. So I think the best way to avoid conflict in inputs from different sections is getting the label selector <label data-addon-name="xxx"> as separator, since the HTML code already have a different label for each section before the inputs, for example: <label data-addon-name="Opções"> , <label data-addon-name="Carnes"> and so on. Also, each one must have a different checkbox limits.

I have the follow html code:

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>

SCRIPT

$("[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');
  }
});

Another try I did is using input[name=addon-3913-opcoes-0[]]... since the name is the same for all selectors, but it returns in error on console. I don't know what the [] means in the end of input name, I think it is an array but have no idea how to work with this. I do prefer the first option, using parent selector, to keep the code easy to maintenance, but I also would like to know how to make the script work with the [] .

Thank you a lot!

Answer 1

Your html has only one label element with the data attribute data-addon-name, only one, and it does not have any descendant at all, leave alone an input element descendant. Therefore, your JS does not make sense. May be the following JS does make sense:

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