轉換：使用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/

任何幫助是值得歡迎的，比KS！

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