Использование 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[]] ..., так как имя одинаково для всех селекторов, но оно возвращается с ошибкой на консоли. Я не знаю, что означает [] в конце имени ввода, я думаю, что это массив, но понятия не имею, как с этим работать. Я предпочитаю первый вариант, используя родительский селектор, чтобы упростить обслуживание кода, но я также хотел бы знать, как заставить скрипт работать с [].
Большое спасибо!
@ imvain2 Я удалил >, но все равно не работает...
—
21.12.2020 23:50
console.info($("[data-addon-name='Opções'] input:checked").length );
—
21.12.2020 23:59
Ваш html имеет только один элемент label с атрибутом данных data-addon-name, только один, и у него вообще нет потомков, не говоря уже о потомке элемента input. Поэтому ваш JS не имеет смысла. Какова ваша цель?
—
22.12.2020 04:44
@PeterKA Мне нужно ограничить выбор флажка в нескольких разделах на одной странице. Поэтому я думаю, что лучший способ избежать конфликтов во входных данных из разных разделов — использовать метку data-addon-name в качестве разделителя, поскольку в HTML-коде уже есть разные метки для каждого раздела перед входными данными, например: [label data-addon-name = "Opções"], [label data-addon-name = "Carnes"] и т. д., каждый с разными пределы. Как избежать конфликтов?
—
22.12.2020 14:55
Вся новая информация должна быть в вашем вопросе, а не здесь.
—
22.12.2020 15:07
Вопрос обновлен!
—
22.12.2020 15:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
85
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Ваш html имеет только один элемент метки с атрибутом данных 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>Хорошо, но ваш оператор if будет перехватывать все входные данные на странице.
—
22.12.2020 04:51
Да, как избежать захвата всех входов на странице?
—
22.12.2020 14:28
Для этого замените каждое вхождение 'input на 'div:has([data-addon-name='Opções']) input, как я сделал выше, или еще лучше определите переменную $inputs и используйте ее, как показано в демонстрации.
—
22.12.2020 15:19
@PeterKA демо возвращает ошибку. Кстати, я обновил вопрос, не могли бы вы взглянуть?
—
22.12.2020 15:25
Демо сейчас хорошее. Попробуйте. Это то, что вам нужно.
—
22.12.2020 15:34
@PeterKA Отлично! Большое спасибо!
—
22.12.2020 15:41
Другие вопросы по теме
Django Smart Select Конфликт JQuery
Как я могу динамически скрывать элементы с помощью javascript?
Установите и снимите флажок по строке
Выберите несколько параметров с разными значениями элемента выбора
Элемент подпрыгивает, когда я запускаю JS, который включает его
Флажок Jquery Switchery отключить созданный новый флажок на странице
Атрибут Materialize CSS coverTrigger не работает
Вызов AJAX не запускается на show.bs.modal
Как суммировать всю цену формы ввода динамической таблицы и добавить значение в новый тип ввода?
Добавить несколько строк таблицы при нажатии кнопки
Похожие вопросы
Сбросьте раскрывающийся список, выбрав отключенный параметр по умолчанию в React
Файл JavaScript со строкой запроса для динамического создания холста в виде изображения png в img src
Вызов индикатора прогресса
Разбивка на страницы в Firestore с помощью react-redux
Состояние реакции useState обновляется, когда используется свойство ключа, но в противном случае для обновления требуется useEffect или аналогичный метод
Сохранение согласованных отношений parentId/id с помощью функции flatten
Максимально увеличьте высоту таблицы и включите полосу прокрутки при достижении в JavaScript/React.js
Nest.js не может разрешить зависимости, не может найти свою ошибку
Как реализовать useMutation из реагирующего запроса в handleSubmit
Создать массив случайных чисел без дубликатов рядом друг с другом в Javascript?
>означает, что следующий селектор должен быть прямым потомком того, что было введено перед ним.[]позволяет получить доступ к данным на стороне сервера в PHP, например, в виде массива. Но чтобы ваш код работал, просто удалите>в селекторе CSS, и он будет фильтровать все дочерние элементы родителя, чтобы найти соответствующие входные данные.