'I need to disable checkboxes within modal after selection
How do I use jQuery to limit user checkbox selections to 2 within a modal?
The modal/div containing the content I'm trying to control is dynamically loaded after clicking the add to cart button [+] and after the jquery that would control the checkboxes loaded.
HTML:
Button that triggers the modal:
<div class="rms-prod-btn">
<a class="rms-add-to-cart" data-type="simple" data-product_id="362" data-menu_id="658" href="#">+</a>
</div>
Javascript: Add-to-Cart:
<script type="text/javascript" id="wc-add-to-cart-js-extra">
/* <![CDATA[ */
var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View cart","cart_url":"https:\/\/206culinaryservices.com\/cart\/","is_cart":"","cart_redirect_after_add":"no"};
/* ]]> */
</script>
HTML Modal Div:
<div class="rms-modal">
<div class="rms-modal-header">
<a href="#" class="close-rms-rest-modal">
<img src="https://206culinaryservices.com/wp-content/plugins/restaurant-for-woocommerce/assets/frontend/images/search-close.svg" alt="">
</a>
</div>
<div class="rms-modal-banner-img" style="background-image: url(https://206culinaryservices.com/wp-content/uploads/2022/02/variety-sandwich-platter.jpg)"> </div> <div class="rms-modal-content">
<div class="rms-modal-content-head">
<div class="top">
<h3 class="rms-prod-title">Variety Sandwich Platter- 24 Half Sandwiches</h3>
<div class="rms-prod-price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>60.00</span></div>
</div>
<div class="bottom">
<p class="rms-prod-desc">Select a variety of up to two types of sandwiches or wraps. Choose from roasted chicken, ham, chipotle turkey, Caprese, portabella wrap, and chicken caesar wrap. Platter of 24 half sandwiches.</p>
</div>
</div>
<div class="rms-notices"></div>
<form class="cart" action="https://206culinaryservices.com/product/variety-sandwich-platter/" method="post" enctype="multipart/form-data">
<div class="rms-form-control">
<div class="rms-leftSide">
<label class="rms-label">Sandwich Platter Options</label>
<small class="rms-desc">Select up to Two Sandwich Types</small>
</div>
<div class="rms-rightSide">
<input type="checkbox" class="inp-cbx" name="rms_mod_666[]" id="roast chicken sandwiches_0_666" value="roast chicken sandwiches_"><label class="cbx cbx-square" for="roast chicken sandwiches_0_666">
<span>
<svg width="12px" height="9px" viewBox="0 0 12 9">
<polyline points="1 5 4 8 11 1"></polyline>
</svg>
</span>
<span>Roast Chicken Sandwiches ( + <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0.00</span>)</span>
</label><input type="checkbox" class="inp-cbx" name="rms_mod_666[]" id="ham sandwiches_1_666" value="ham sandwiches_"><label class="cbx cbx-square" for="ham sandwiches_1_666">
<span>
<svg width="12px" height="9px" viewBox="0 0 12 9">
<polyline points="1 5 4 8 11 1"></polyline>
</svg>
</span>
<span>Ham Sandwiches ( + <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0.00</span>)</span>
</label><input type="checkbox" class="inp-cbx" name="rms_mod_666[]" id="chipotle turkey sandwiches_2_666" value="chipotle turkey sandwiches_"><label class="cbx cbx-square" for="chipotle turkey sandwiches_2_666">
<span>
<svg width="12px" height="9px" viewBox="0 0 12 9">
<polyline points="1 5 4 8 11 1"></polyline>
</svg>
</span>
<span>Chipotle Turkey Sandwiches ( + <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0.00</span>)</span>
</label><input type="checkbox" class="inp-cbx" name="rms_mod_666[]" id="caprese sandwiches_3_666" value="caprese sandwiches_"><label class="cbx cbx-square" for="caprese sandwiches_3_666">
<span>
<svg width="12px" height="9px" viewBox="0 0 12 9">
<polyline points="1 5 4 8 11 1"></polyline>
</svg>
</span>
<span>Caprese Sandwiches ( + <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0.00</span>)</span>
</label><input type="checkbox" class="inp-cbx" name="rms_mod_666[]" id="portabella wraps_4_666" value="portabella wraps_"><label class="cbx cbx-square" for="portabella wraps_4_666">
<span>
<svg width="12px" height="9px" viewBox="0 0 12 9">
<polyline points="1 5 4 8 11 1"></polyline>
</svg>
</span>
<span>Portabella Wraps ( + <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0.00</span>)</span>
</label><input type="checkbox" class="inp-cbx" name="rms_mod_666[]" id="chicken caesar wraps_5_666" value="chicken caesar wraps_"><label class="cbx cbx-square" for="chicken caesar wraps_5_666">
<span>
<svg width="12px" height="9px" viewBox="0 0 12 9">
<polyline points="1 5 4 8 11 1"></polyline>
</svg>
</span>
<span>Chicken Caesar Wraps ( + <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0.00</span>)</span>
</label> <span class="rms-required-label">required</span>
</div>
</div>
<div class="rms-modal-footer">
<div class="rms-item-qty">
<a href="#" class="rms-minus-qty"><svg class="svg-inline--fa fa-minus fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="minus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg><!-- <i class="fas fa-minus"></i> Font Awesome fontawesome.com --></a>
<input type="text" min="1" name="quantity" class="rms-qty rms-no-update" value="1">
<a href="#" class="rms-add-qty"><svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg><!-- <i class="fas fa-plus"></i> Font Awesome fontawesome.com --></a>
</div>
<button type="submit" name="add-to-cart" value="362" class="single_add_to_cart_button button alt">Add to cart</button>
</div>
</form>
</div>
</div>
My jquery (that's not working):
(function($){
$('.rms-modal').on('shown.bs.modal', function (e) {
$(":checkbox[name='rms_mod_666[]']").change(function() {
if ($(":checkbox[name='rms_mod_666[]']:checked").length == 2) {
$(":checkbox:not(:checked)").prop('disabled', true);
} else {
$(":checkbox:not(:checked)").prop('disabled', false);
}
});
});
})(jQuery);
For reference [this is the menu in question][1]. Click sandwiches, then 'Variety Sandwich Platter- 24 Half Sandwiches' to trigger the modal. [1]: https://206culinaryservices.com/place-an-order/
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|