转换：使用 Jquery 在单选按钮中选择

Question

我有两个选择元素（第一个是尺寸，第二个是颜色）。我无法在此代码中进行两次调整，我需要帮助来了解如何进行。

首先： 当我选择一个选项（单选按钮）时，我正在使用一个名为“checked”的类。但是问题是当我选择第二个选项（颜色）时，我需要在第一个选项（大小）中保持类“选中”。

第二： 如果不先选择尺寸（第一个选项），用户就不能选择第二个选项（颜色）。所以我需要禁用颜色选项，直到用户选择一个尺寸。

HTML

<select name="iluria-product-variation1" id="iluria-product-variation1" onchange="selectedVariation1()">
<option value="0" id="default-variation-1" selected="selected">Tamanho</option>
<option value="2DE650" class="variation1-option">PP</option>
<option value="2DE651" class="variation1-option">P</option>
<option value="2DE652" class="variation1-option">M</option>
<option value="2DE653" class="variation1-option">G</option>
<option value="2DE654" class="variation1-option">GG</option></select>

<select name="iluria-product-variation2" id="iluria-product-variation2" onchange="selectedVariation2()">
<option value="0" id="default-variation-2" selected="selected">Cor</option>
<option value="2DE655" class="variation2-option">Amarelo</option>
<option value="2DE661" class="variation2-option">Vinho</option>
<option value="2DE660" class="variation2-option">Vermelho</option>
<option value="2DE65F" class="variation2-option">Verde</option>
<option value="2DE65E" class="variation2-option">Roxo</option>
<option value="2DE65D" class="variation2-option">Rosa</option>
<option value="2DE65C" class="variation2-option">Preto</option>
<option value="2DE65B" class="variation2-option">Marrom</option>
<option value="2DE65A" class="variation2-option">Laranja</option>
<option value="2DE659" class="variation2-option">Dourado</option>
<option value="2DE658" class="variation2-option">Cinza</option>
<option value="2DE657" class="variation2-option">Branco</option>
<option value="2DE656" class="variation2-option">Azul</option>
<option value="2DE662" class="variation2-option">Violeta</option>

JS

$('select#iluria-product-variation1, select#iluria-product-variation2').each(function(i, select){
var $select = jQuery(select);
$select.find('option').each(function(j, option){
var $option = jQuery(option);
// Create a radio:
var $radio = jQuery('<input type="radio" />');
// Set name and value:
$radio.attr('name', $select.attr('name')).attr('value', $option.val()).attr('id', $option.text());
// Set checked if the option was selected
if ($option.attr('selected')) $radio.attr('checked', 'checked');
// Insert radio before select box:
    $select.before($radio);
    $radio.wrap('<div class="vari-option fix" />');
// Insert a label:
$radio.before(
    $("<label />").attr('for', $option.text()).text($option.text()).addClass($option.text())
);
    $(".product-variations-container").css("display", "block");
});
}); 

$(':radio').click(function(){
$(this).parent().parent().find('label').removeClass('checked');
$(this).siblings('label').addClass('checked');
$choice = $(this).attr('value');
$('select#iluria-product-variation1 option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
$('select#iluria-product-variation2 option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
});

JSFiddle 示例 - http://jsfiddle.net/3kzmq12g/2/

欢迎任何帮助，谢谢！

Answer 1

你可以使用属性选择器和 .on() 方法来实现你想要的，基本上你只需要添加一个 on() 监听器来查看第一组单选按钮是否被选中。

$('[name="iluria-product-variation2"]').prop('disabled', true); 

$(document).on('click' , 'input[name="iluria-product-variation1"]'  , function(){
    $('[name="iluria-product-variation2"]').prop('disabled', false) 
});

$('[name="iluria-product-variation2"]').click(function(){
    $('[name="iluria-product-variation2"]').siblings('label').removeClass('checked');
    $(this).siblings('label').addClass('checked');
    $choice = $(this).attr('value');
    $('select#iluria-product-variation1 option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
    $('select#iluria-product-variation2 option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
});

$('[name="iluria-product-variation1"]').click(function(){
    $('[name="iluria-product-variation1"]').siblings('label').removeClass('checked');
    $(this).siblings('label').addClass('checked');
    $choice = $(this).attr('value');
    $('select#iluria-product-variation1 option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
    $('select#iluria-product-variation2 option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
});

$('select#iluria-product-variation1').on('change' , function(){
    $('[name="iluria-product-variation2"]').prop('disabled', true);
});

FIDDLE HERE