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

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 >
  <form action="/cart/add" id="add-to-cart-1">
    <div >
      <div >
        <input type="radio" name="color" id="1"  value="1" available>
        <input type="radio" name="color" id="2"  value="2" unavailable>
      </div>
    </div>
    <div  style="display:none;">
      <input type="submit" value="Add to cart">
    </div>
    <div  style="display:none;">
      <button>Out of stock</button>
    </div>
  </form>
</div>

<div >
  <form action="/cart/add" id="add-to-cart-2">
    <div >
      <div >
        <input type="radio" name="color" id="3"  value="3" unavailable>
        <input type="radio" name="color" id="4"  value="4" available>
      </div>
    </div>
    <div  style="display:none;">
      <input type="submit" value="Add to cart">
    </div>
    <div  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.

CodePudding user response：

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').show();
    $(this).closest('.radios').nextAll('.button-unavailable').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <form action="/cart/add" id="add-to-cart-1">
    <div >
      <div >
        <input type="radio" name="color" id="1"  value="1" data-statut="available">
        <input type="radio" name="color" id="2"  value="2" data-statut="unavailable">
      </div>
    </div>
    <div  style="display:none;">
      <input type="submit" value="Add to cart">
    </div>
    <div  style="display:none;">
      <button>Out of stock</button>
    </div>
  </form>
</div>

<div >
  <form action="/cart/add" id="add-to-cart-2">
    <div >
      <div >
        <input type="radio" name="color" id="3"  value="3" data-statut="available">
        <input type="radio" name="color" id="4"  value="4" data-statut="unavailable">
      </div>
    </div>
    <div  style="display:none;">
      <input type="submit" value="Add to cart">
    </div>
    <div  style="display:none;">
      <button>Out of stock</button>
    </div>
  </form>
</div>