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

Posted

技术标签:

【中文标题】将下拉选择输入转换为需要选择一个的单选按钮【英文标题】:Converting drop-down select input to radio buttons which require one to be chosen 【发布时间】:2010-12-21 01:47:25 【问题描述】:

我正在使用电子商务系统,该系统允许您为每种产品提供多种变体 - (例如:大号、中号、小号 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" />

您如何建议我将下拉菜单转换为单选按钮,并确保在他们选择变体之前无法点击“添加到购物车”按钮? 谢谢

【问题讨论】:

【参考方案1】:

为什么不添加一个值为 0 和文本“请选择尺寸”的默认选项?

【讨论】:

宾果游戏。我们最近在我们的网站上做到了这一点。重要提示:添加验证器以确保他们不允许订购“请选择”选项【参考方案2】:

我不是 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');
    );
);

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

【讨论】:

以上是关于将下拉选择输入转换为需要选择一个的单选按钮的主要内容,如果未能解决你的问题,请参考以下文章

下拉转换为单选按钮,不再触发特定功能

防止基于选择框选择的单选按钮更改

javascript中的单选按钮验证

如何将 Bootstrap 中的按钮组转换为表单的单选式输入?

在付款方式中选择选项而不是 magento 中的单选按钮

使用带角度的单选按钮更新不同的模型