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

问题描述

我有两个选择元素(第一个是尺寸，第二个是颜色).我在此代码中难以进行两次调整，我需要帮助以了解如何进行.

I have two select elemments (first is size, second is color). I am having trouble to make two adjusts in this code and I need help to understand how proceed.

首先:选择选项(单选按钮)时，我使用的是已检查"类.但是问题是，当我选择第二个选项(颜色)时，我需要在第一个选项(大小)中保持选中"类.

First:I am using a class called 'checked' when I select a option (radio button). However the problem is I need keep the class 'checked' in the first option (size) when I select the second option (color).

第二:用户必须先选择尺寸(第一个选项)，才能选择第二个选项(颜色).因此，我需要禁用颜色选项，直到用户选择尺寸为止.

Second:The user cannot select the second option (color) without select the size first (first option). So I need disable the color option until the user select a size.

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');
});

欢迎任何帮助，谢谢！

推荐答案

您可以使用属性选择器和.on()方法来实现所需的功能，基本上，您只需要添加on()侦听器即可查看是否是否选中了第一组单选按钮.

You can use attribute selectors and the .on() method to acheive what you want to , basically you just need to add a on() listener to see if the first set of radio buttons are checked or not.

$('[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

这篇关于转换:使用Jquery在单选按钮中选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！