将下拉选择输入转换为需要选择的单选按钮

Question

我正在使用电子商务系统，该系统允许您为每个产品（例如：大，中，小T恤衫）。但是，我们收到客户的投诉，他们添加了一件T恤并忽略了这种变化。结果，很多大个子都在买小T恤衫（默认）。为了解决这个问题，我想强制用户选择一个单选按钮（而不是下拉选择列表），只有这样才能使添加到购物车按钮变为可用。这里是当前的PHP显示选择下拉菜单;

<?php while (have_variation_groups()) : the_variation_group(); ?> 
    <?php /** variation HTML and loop */?> 
    <select class='select_variation' name="variation[<?php echo variation_id(); ?>]" id="<?php echo variation_group_form_id(); ?>"> 
    <?php while (have_variations()) : the_variation(); ?> 
    <option value="<?php echo the_variation_id(); ?>"><?php echo the_variation_name(); ?></option> 
    <?php endwhile; ?> 
</select> 
<?php endwhile; ?> 
<?php echo add_to_cart_button(the_product_id()); ?> 

哪个吐出这种HTML的...

<select class='select_variation' name="variation[1]" id="variation_select_22_1"> 
<option value="1">Small</option> 
<option value="2">Big</option> 
</select> 
<input type='submit' id='product_22_submit_button' class='buy_button' name='Buy' value="Add To Cart" /> 

你会如何建议我转换下拉至单选按钮，并确保添加到购物车按钮不可可点击直到他们选择了变体？ 谢谢

Answer 1

我不是一个PHP开发人员，提前很抱歉，如果我杀猪的语言......

这应该让你的单选按钮列表：

<?php while (have_variation_groups()) : the_variation_group(); ?> 
    <?php /** variation HTML and loop */?> 
    <ul class='select_variation' name="variation[<?php echo variation_id(); ?>]" id="<?php echo variation_group_form_id(); ?>"> 
    <?php while (have_variations()) : the_variation(); ?> 
    <li><input type="radio" name="variation[<?php echo variation_id(); ?>]" value="<?php echo the_variation_id(); ?>"/><?php echo the_variation_name(); ?></li> 
    <?php endwhile; ?> 
</ul> 
<?php endwhile; ?> 
<?php echo add_to_cart_button(the_product_id()); ?> 

这将有望给您是这样的：

<ul class='select_variation' name="variation[1]" id="variation_select_22_1"> 
<li><input type="radio" name="variation[1]" value="1" />Small</li> 
<li><input type="radio" name="variation[1]" value="2" />Big</li> 
</ul> 
<input type='submit' id='product_22_submit_button' class='buy_button' name='Buy' value="Add To Cart" /> 

然后你可以使用一些jQuery来启用该按钮时，被点击的选项之一：

$(function() 
{ 
    $('.buy_button').attr('disabled', 'true'); 

    $('ul li input').click(function() 
    { 
     $('.buy_button').removeAttr('disabled'); 
    }); 
}); 

您也可以考虑在现有的下拉菜单中添加一个虚拟的“请选择”项并将其设置为默认值。

Answer 2

为什么不添加一个值为0的默认选项和文本“请选择大小”？