如何根據以前的單選選項禁用單選按鈕-有解無憂

這是我的代碼想要在組合的基礎上禁用顏色和石頭，例如如果使用選擇金：紅色和藍色石頭將被禁用玫瑰金：藍色，虎眼，sunglow 和孔雀石將被禁用，對于銀紅色，黑色，虎眼，陽光，孔雀石和黑色將被禁用

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

uj5u.com熱心網友回復：

我更新了你的代碼，試圖為你提供最好的作業演示。這是作業演示，如果我這邊有任何遺漏，請按照此演示進行更改。

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

uj5u.com熱心網友回復：

我設計了一個解決方案。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338609.html

標籤：javascript 查询购物

上一篇：如何在特定行上的Cypress中查找元素

下一篇：頁面完全加載后觸發單擊復選框