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

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

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

第二：用户无法选择第二个选项（颜色）而不选择第一个选项（第一个选项）。 所以我需要禁用颜色选项，直到用户选择一个大小。

HTML

 Tamanho PP P M G GG  Cor Amarelo Vinho Vermelho Verde Roxo Rosa Preto Marrom Laranja Dourado Cinza Branco Azul Violeta 

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(''); // 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('
'); // Insert a label: $radio.before( $("").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); }); 

骗子在这里