How to show/hide elements based on multiple input groups with jQuery? - html

Question

I have multiple product forms on one page. Within each form are multiple color options (radio buttons) with either an available or unavailable attribute.
I would like to show a custom add to cart button for each product depending on if the selected color option is available, ie. if input[available]:checked show .button-available else show .button-unavailable
Expected results
When the page loads, the first color option is always pre-selected. Depending on its availability, the corresponding button should be shown. When the selection changes, the button should change if necessary.
HTML structure
<div class="list-item">
<form action="/cart/add" id="add-to-cart-1">
<div class="radios">
<div class="colors">
<input type="radio" name="color" id="1" class="red" value="1" available>
<input type="radio" name="color" id="2" class="blue" value="2" unavailable>
</div>
</div>
<div class="button-available" style="display:none;">
<input type="submit" value="Add to cart">
</div>
<div class="button-unavailable" style="display:none;">
<button>Out of stock</button>
</div>
</form>
</div>
<div class="list-item">
<form action="/cart/add" id="add-to-cart-2">
<div class="radios">
<div class="colors">
<input type="radio" name="color" id="3" class="red" value="3" unavailable>
<input type="radio" name="color" id="4" class="blue" value="4" available>
</div>
</div>
<div class="button-available" style="display:none;">
<input type="submit" value="Add to cart">
</div>
<div class="button-unavailable" style="display:none;">
<button>Out of stock</button>
</div>
</form>
</div>
My sad attempt at a script
$(document).ready(function() {
var $list = $('.list-item');
$list.each(function(){
if ( $('input[name=color][unavailable]:checked').val() !== 'true' ) {
$(this).closest('.button-available').show();
}
if ( $('input[name=color][available]:checked').val() !== 'true' ) {
$(this).closest('.button-unavailable').show();
}
$('input[name=color]:checked').on('change', function() {
if ($(this).attr('available') == 'true' ) {
$(this).closest('.button-available').show();
$(this).closest('.button-unavailable').hide();
}
else {
$(this).attr('unavailable') == 'true' ) {
$(this).closest('.button-available').show();
$(this).closest('.button-unavailable').show();
}
});
});
Thank you in advance for your guidance.

Answer 1

I propose to you to change your attribute available/unavailable by using data().
closest give you the more clause element with class. You also need nextAll or prevAll() to get next ou previous element.
I may forgot to fix something, tell me if something is missing.
var $list = $('.list-item');
$list.each(function(){
if ( $(this).find('input[name=color][data-statut="unavailable"]').is(':checked') === false ) {
$(this).find('.button-available').show();
}
if ( $(this).find('input[name=color][data-statut="available"]').is(':checked') === false ) {
$(this).find('.button-unavailable').show();
}
});
$('input[name=color]').on('change', function() {
if ($(this).data('statut') == 'available' ) {
$(this).closest('.radios').nextAll('.button-available').show();
$(this).closest('.radios').nextAll('.button-unavailable').hide();
}
if ($(this).data('statut') == 'unavailable' ) {
$(this).closest('.radios').nextAll('.button-available').hide();
$(this).closest('.radios').nextAll('.button-unavailable').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
<form action="/cart/add" id="add-to-cart-1">
<div class="radios">
<div class="colors">
<input type="radio" name="color" id="1" class="red" value="1" data-statut="available">
<input type="radio" name="color" id="2" class="blue" value="2" data-statut="unavailable">
</div>
</div>
<div class="button-available" style="display:none;">
<input type="submit" value="Add to cart">
</div>
<div class="button-unavailable" style="display:none;">
<button>Out of stock</button>
</div>
</form>
</div>
<div class="list-item">
<form action="/cart/add" id="add-to-cart-2">
<div class="radios">
<div class="colors">
<input type="radio" name="color" id="3" class="red" value="3" data-statut="available">
<input type="radio" name="color" id="4" class="blue" value="4" data-statut="unavailable">
</div>
</div>
<div class="button-available" style="display:none;">
<input type="submit" value="Add to cart">
</div>
<div class="button-unavailable" style="display:none;">
<button>Out of stock</button>
</div>
</form>
</div>