How to Disable radio button based on previous radio selection-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>