Использование Jquery для ограничения выбора флажка с помощью родительских селекторов html

ОБНОВЛЯТЬ

Мне нужно ограничить выбор флажка в нескольких разделах на одной странице. Поэтому я думаю, что лучший способ избежать конфликтов во входных данных из разных разделов — это использовать селектор меток <label data-addon-name = "xxx"> в качестве разделителя, поскольку HTML-код уже имеет разные метки для каждого раздела перед входными данными, например: <label data-addon-name = "Opções">, <label data-addon-name = "Carnes"> и так далее. Кроме того, каждый из них должен иметь разные ограничения флажка.

У меня есть следующий 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[]] ..., так как имя одинаково для всех селекторов, но оно возвращается с ошибкой на консоли. Я не знаю, что означает [] в конце имени ввода, я думаю, что это массив, но понятия не имею, как с этим работать. Я предпочитаю первый вариант, используя родительский селектор, чтобы упростить обслуживание кода, но я также хотел бы знать, как заставить скрипт работать с [].

Большое спасибо!

🤔 А знаете ли вы, что...
JavaScript можно использовать для создания видеоигр, как 2D, так и 3D, с использованием библиотеки Three.js.