將下拉選擇輸入轉換爲需要選擇的單選按鈕

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的默認選項和文本「請選擇大小」？