Question 11957 in Shopify Question posted in
The Shopify help center can be found here.

How to Disable radio button based on previous radio selection – Shopify

here is my code want to disable color and stone on the basis of combination
for example if use select
gold:red and blue stone will be disable
for rose -gold :blue ,tiger eye ,sunglow and malachite will be disable
and for silver red,black,tiger eye ,sunglow ,malachite and black will be disable

$("input[name^='product_']").on('change', (e) => {
  $("input[name='combination']").prop('checked', false);
  var productColor = $("input[name='product_color']:checked").val();
  var productStone = $("input[name='product_stone']:checked").val();

  if (productColor !== undefined && productStone !== undefined) {
    if ($(`input[data-color='${productColor}'][data-stone='${productStone}']`).length) {
      $(`input[data-color='${productColor}'][data-stone='${productStone}']`).trigger('click');
    }else{
    alert("varient not found");
    }

  }

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="product_colors">
        <span class="header" style="display:block;">Color</span>
      
        <label class="color_label active">   
                <input type="radio" name="product_color" value="gold" >Gold                           
                <span style="""></span>                  
                </label>
      
        <label class="color_label">   
                <input type="radio" name="product_color" value="rose gold">Rose Gold                         
                <span style="" data-title="rose gold"></span>                  
                </label>
      
        <label class="color_label">   
                <input type="radio" name="product_color" value="silver" > Silver                            
                <span style="" data-title="silver"></span>                  
                </label>
      </div>
      
      <div class="product_stones">
        <span class="header" style="display:block;">Stone</span>
      
        <label class="stone_label">
                <input type="radio" name="product_stone" value="malachite" >malachite         
              </label>
      
        <label class="stone_label active">
                <input type="radio" name="product_stone" value="tiger-eye" > tiger-eye        
              </label>
      
        <label class="stone_label">
                <input type="radio" name="product_stone" value="black" > black           
              </label>
      
        <label class="stone_label">
                <input type="radio" name="product_stone" value="blue" > blue         
              </label>
        <label class="stone_label">
                <input type="radio" name="product_stone" value="red" > red         
        </label>
      
      </div>
      
      <div class="combination">
        Combination
        <div class="hidden">
          <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
          <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
          <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="black" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-black
          <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="sunglow" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-sunglow
          <input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
          <input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="red" data-handle="kanz-ring-black-rose-gold"> rose-gold-red
          <input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
      
        </div>
      </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I devised a solution.

    $("input[name^='product_']").on('change', (e) => {
var productColor = $("input[name='product_color']:checked").val();
var productStone = $("input[name='product_stone']:checked").val();
$('input[name=combination]').prop('disabled', true);


if ($(`input[data-color='${productColor}']`).length) {
$(`input[data-color='${productColor}']`).prop('disabled',false)
$(`input[name=product_stone]`).prop('disabled', true);
$(`input[data-color='${productColor}']`).each(function(i,el){
var p = $(el).attr('data-stone');

        
        $(`input[name=product_stone][value='${p}']`).prop('disabled', false);
}); 
}



});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div class="product_colors">
            <span class="header" style="display:block;">Color</span>
          
            <label class="color_label active">   
                    <input type="radio" name="product_color" value="gold" >Gold                           
                    <span style="""></span>                  
                    </label>
          
            <label class="color_label">   
                    <input type="radio" name="product_color" value="rose gold">Rose Gold                         
                    <span style="" data-title="rose gold"></span>                  
                    </label>
          
            <label class="color_label">   
                    <input type="radio" name="product_color" value="silver" > Silver                            
                    <span style="" data-title="silver"></span>                  
                    </label>
          </div>
          
          <div class="product_stones">
            <span class="header" style="display:block;">Stone</span>
          
            <label class="stone_label">
                    <input type="radio" name="product_stone" value="malachite" >malachite         
                  </label>
          
            <label class="stone_label active">
                    <input type="radio" name="product_stone" value="tiger-eye" > tiger-eye        
                  </label>
          
            <label class="stone_label">
                    <input type="radio" name="product_stone" value="black" > black           
                  </label>
          
            <label class="stone_label">
                    <input type="radio" name="product_stone" value="blue" > blue         
                  </label>
            <label class="stone_label">
                    <input type="radio" name="product_stone" value="red" > red         
            </label>
          
          </div>
          
          <div class="combination">
            Combination
            <div class="hidden">
              <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
              <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
              <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="black" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-black
              <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="sunglow" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-sunglow
              <input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
              <input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="red" data-handle="kanz-ring-black-rose-gold"> rose-gold-red
              <input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
          
            </div>
          </div>


  2. 0

    I updated your code to try to give you the best working demo. here is the working demo if anything is left from my side please change it as per this demo.

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("input[name^='product_']").on('change', (e) => {
  $("input[name='combination']").prop('checked', false);
  var productColor = $("input[name='product_color']:checked").val();
  var productStone = $("input[name='product_stone']:checked").val();

  if (productColor !== undefined && productStone !== undefined) {
    if ($(`input[data-color='${productColor}'][data-stone='${productStone}']`).length) {
      $(`input[data-color='${productColor}'][data-stone='${productStone}']`).trigger('click');
    }else{
    alert("varient not found");
    }
  }

});

$('#gold').change(function() {
 $('input[type=radio]').prop('disabled',false)
  if ($(this).is(':checked')) {
         $('#blue,#red').prop('disabled',true) 
  }     
});
 
 $('#rose').change(function() {
  $('input[type=radio]').prop('disabled',false)
    if ($(this).is(':checked')) {
            $('#blue,#tiger_eye,#gold_sunglow,#gold_malachite').prop('disabled',true)   
    }
     
});
 $('#silver').change(function() {
  $('input[type=radio]').prop('disabled',false)
    if ($(this).is(':checked')) {
            $('#red,#black,#tiger,#gold_malachite,#gold_sunglow').prop('disabled',true)  
    }
        
});
});
</script>
</head>
<body>

    <div class="product_colors">
        <span class="header" style="display:block;">Color</span>
      
        <label class="color_label active">   
                <input type="radio" name="product_color" value="gold" id="gold"/>Gold                           
                <span style="""></span>                  
                </label>
      
        <label class="color_label">   
                <input type="radio" name="product_color" value="rose gold" id="rose">Rose Gold                         
                <span style="" data-title="rose gold"></span>                  
                </label>
      
        <label class="color_label">   
                <input type="radio" name="product_color" value="silver" id="silver"> Silver                            
                <span style="" data-title="silver"></span>                  
                </label>
      </div>
      
      <div class="product_stones">
        <span class="header" style="display:block;">Stone</span>
      
        <label class="stone_label">
                <input type="radio" name="product_stone" value="malachite" >malachite         
              </label>
      
        <label class="stone_label active">
                <input type="radio" name="product_stone" value="tiger-eye" id="tiger"> tiger-eye        
              </label>
      
        <label class="stone_label">
                <input type="radio" name="product_stone" value="black" id="black"> black           
              </label>
      
        <label class="stone_label">
                <input type="radio" name="product_stone" value="blue" id="blue"/> blue         
              </label>
        <label class="stone_label">
                <input type="radio" name="product_stone" value="red" id="red"> red         
        </label>
      
      </div>
      
      <div class="combination">
        Combination
        <div class="hidden">
          <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold" id="gold_malachite"> gold-malachite
          <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold" id="tiger_eye">gold-tiger-eye
          <input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="black" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-black
          <input type="radio" name="combination" class="hidden_wrap" data-color="gold" id="gold_sunglow" data-stone="sunglow" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-sunglow
          <input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
          <input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="red" data-handle="kanz-ring-black-rose-gold"> rose-gold-red
          <input type="radio" name="combination" class="hidden_wrap" data-color="silver" id="silver_blue" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
      
        </div>
      </div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search