如何根据之前的单选选择禁用单选按钮

这里是我的代码想禁用颜色和石头的基础上的组合例如，如果使用select黄金:红色和蓝色的石头将被禁用玫瑰金:蓝色，虎眼，日光和孔雀石将失效而对于银红、黑色、虎眼、日光、孔雀石和黑色将禁用

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

我更新了你的代码，试图给你最好的工作演示。以下是工作演示，如果我这边有任何遗漏，请按照演示修改。

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

我想出了一个解决办法。

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

相关内容

最新更新

热门标签：