如何根据先前的单选选择禁用单选按钮答案

【问题标题】：How to Disable radio button based on previous radio selection如何根据先前的单选选择禁用单选按钮
【发布时间】：2021-10-26 09:55:13
【问题描述】：

这是我的代码想要在组合的基础上禁用颜色和石头例如，如果使用选择金：红色和蓝色石头将被禁用玫瑰金：蓝色、虎眼、阳光和孔雀石将被禁用银红、黑、虎眼、阳光、孔雀石和黑色将被禁用

$("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>

【问题讨论】：

标签： javascript jquery shopify

【解决方案1】：

我更新了您的代码，试图为您提供最好的工作演示。这是工作演示，如果我身边有任何遗漏，请按照此演示进行更改。

<!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>

【讨论】：

我不需要静态颜色名称
然后必须检查单击了哪个框，然后按条件启用禁用复选框。
是的，我需要这个逻辑
从逻辑上讲，您只能知道选中了哪个复选框，但启用禁用必须静态执行的特定复选框。

【解决方案2】：

我设计了一个解决方案。

$("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>

【讨论】：