У меня есть условие для добавления отключенного класса в мой div после выбора нескольких флажков, которые равны 5
у меня есть условие для добавления отключенного класса в мой div после выбора нескольких флажков, которые равны 5. этот код добавляет отключенный ко всем флажкам div, который также включает текущий выбранный.. поэтому я хочу, чтобы он отключил только невыбранные после 5 полей выбора, а не для всех div..
<div class = "wapf-swatch wapf-swatch--image wapf-checked">
<input type = "hidden" class = "wapf-tf-h" data-fid = "5fd25d21855fd" value = "0" name = "wapf[field_5fd25d21855fd][]">
<input type = "checkbox" id = "wapf_field_5fd25d21855fd_kd4ik" name = "wapf[field_5fd25d21855fd][]" class = "wapf-input" data-field-id = "5fd25d21855fd" value = "kd4ik" data-wapf-label = "Haribo Strawberry" data-is-required = "" data-maxc = "">
<img src = "http://sweetshop.nantwichwebdesign.co.uk/wp-content/uploads/2020/12/1.png">
<span class = "wapf-ttp"><span>Haribo Strawberry</span></span>
</div>$(":checkbox[class='.wapf-input']").change(function(){
if ($(":checkbox[class='.wapf-input']:checked").length == 2)
$('.wapf-swatch').addClass('disabled');
else
$('.wapf-swatch').removeClass('disabled', false);
});
Для чего твой инвалид?
Пожалуйста, добавьте HTML, чтобы мы могли воспроизвести это
@Adhitya, его очень простые флажки щелкают .. но я устанавливаю ограничение после 2 флажков, больше нет выбора, пока другие не будут сняты .. но мне нужно отключить основной div .. чтобы он не снял его снова, вот в чем проблема
Вы используете HTML для этого? если да, пожалуйста, добавьте его.
проверьте html, у меня почти 20 одинаковых div с флажками, я хочу выбрать случайные 5 и отключить другие, но теперь, когда он достигает 5, он отключает все, пожалуйста, помогите
вот ссылка, вы можете выбрать 5, но она также отключит все sweetshop.nantwichwebdesign.co.uk/product/custom-sweet-bag
@Taplar проверьте html, у меня почти 20 одинаковых div с флажками, я хочу выбрать случайные 5 и отключить другие, но теперь, когда он достигает 5, он отключает все, пожалуйста, помогите
@mpora проверьте html, у меня почти 20 одинаковых div с флажками, я хочу выбрать случайные 5 и отключить другие, но теперь, когда он достигает 5, он отключает все, пожалуйста, помогите
Привет, вам нужно отключить div? или сам флажок?
@swati, чтобы добавить класс для инвалидов в DIV вот так thesweetshophq.com/product/customise-your-own-sweet-bags
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать :not(:checked), чтобы получить все флажки, которые не отмечены, а затем просто использовать addClass, чтобы добавить класс disabled, иначе используйте removeClass, чтобы удалить класс.
Демонстрационный код:
$(".wapf-input").change(function() {
//get checked checkbox length
if ($(".wapf-swatch input[type=checkbox]:checked").length == 2) {
//get checkbox not checked add class disable
$('.wapf-swatch > input[type=checkbox]:not(:checked)').closest(".wapf-swatch").addClass("disabled")
} else {
//remove class disabled
$('.wapf-swatch').removeClass("disabled")
}
});.disabled {
pointer-events: none;
background-color: grey;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wapf-swatch wapf-swatch--image wapf-checked">
<input type = "hidden" class = "wapf-tf-h" data-fid = "5fd25d21855fd" value = "0" name = "wapf[field_5fd25d21855fd][]">
<input type = "checkbox" name = "wapf[field_5fd25d21855fd][]" class = "wapf-input" data-field-id = "5fd25d21855fd" value = "kd4ik" data-wapf-label = "Haribo Strawberry" data-is-required = "" data-maxc = "">
<span class = "wapf-ttp"><span>Strawberry</span></span>
</div>
<div class = "wapf-swatch wapf-swatch--image wapf-checked">
<input type = "hidden" class = "wapf-tf-h" data-fid = "5fd25d21855fd" value = "0" name = "wapf[field_5fd25d21855fd][]">
<input type = "checkbox" name = "wapf[field_5fd25d21855fd][]" class = "wapf-input" data-field-id = "5fd25d21855fd" value = "kd4ik" data-wapf-label = "Haribo Strawberry" data-is-required = "" data-maxc = "">
<span class = "wapf-ttp"><span> Strawberr1</span></span>
</div>
<div class = "wapf-swatch wapf-swatch--image wapf-checked">
<input type = "hidden" class = "wapf-tf-h" data-fid = "5fd25d21855fd" value = "0" name = "wapf[field_5fd25d21855fd][]">
<input type = "checkbox" name = "wapf[field_5fd25d21855fd][]" class = "wapf-input" data-field-id = "5fd25d21855fd" value = "kd4ik" data-wapf-label = "Haribo Strawberry" data-is-required = "" data-maxc = "">
<span class = "wapf-ttp"><span>Haribo11</span></span>
</div>
<div class = "wapf-swatch wapf-swatch--image wapf-checked">
<input type = "hidden" class = "wapf-tf-h" data-fid = "5fd25d21855fd" value = "0" name = "wapf[field_5fd25d21855fd][]">
<input type = "checkbox" name = "wapf[field_5fd25d21855fd][]" class = "wapf-input" data-field-id = "5fd25d21855fd" value = "kd4ik" data-wapf-label = "Haribo Strawberry" data-is-required = "" data-maxc = "">
<span class = "wapf-ttp"><span>Haribo111</span></span>
</div>
<div class = "wapf-swatch wapf-swatch--image wapf-checked">
<input type = "hidden" class = "wapf-tf-h" data-fid = "5fd25d21855fd" value = "0" name = "wapf[field_5fd25d21855fd][]">
<input type = "checkbox" name = "wapf[field_5fd25d21855fd][]" class = "wapf-input" data-field-id = "5fd25d21855fd" value = "kd4ik" data-wapf-label = "Haribo Strawberry" data-is-required = "" data-maxc = "">
<span class = "wapf-ttp"><span>Haribo12</span></span>
</div>ЗАМЕЧАТЕЛЬНО!! Ты спасаешь мой день, Свати... гений.. мне нужно 2 дня, чтобы сделать это, но ты классная шляпа!
Пожалуйста, сделайте минимально воспроизводимый пример проблемы