如何显示禁用单选按钮组合的警报

Question

我的表单中有两个输入类型第一个代码用于选择产品下一个代码用于选择付款方式

//below code is item selection
<input type="radio" id="layanan_163" value="163" name="layanan" data-type="diamond" required>
<label for="layanan_163" class="list-group-item h-100">
<div class="col nama-layanan-form">Starlight</div>
<div class="col nominal-price">USD 9</div>
</label>
<input type="radio" id="layanan_163" value="163" name="layanan" data-type="diamond" required>
<label for="layanan_163" class="list-group-item h-100">
<div class="col nama-layanan-form">Starlight Plus</div>
<div class="col nominal-price">USD 15</div>
</label>
// below code is payment method selection
<input required type="radio" id="method_4" class="radio-pembayaran" name="metode" value="4">
<label for="method_4" class="list-group-item h-100">Paypal</label>
<input required type="radio" id="method_3" class="radio-pembayaran" name="metode" value="3">
<label for="method_3" class="list-group-item h-100">Bank Transfer</label>

与not-allowed-组合为:当用户选择价格低于10美元的商品时，不允许选择paypal作为付款方式(不能选择单选按钮)

如果访问者选择了不允许的组合，如何显示警告??

和如何禁用访问者不选择不允许的组合?

Answer 1

首先，您的两个无线电输入name="layanan"有相同的值，这将是一个问题，所以给他们一个不同的值。然后，您可以添加一个data-price="9">和data-price ="15">给他们，这样你可以很容易地得到他们的价格。

现在在JavaScript中，使用jQuery使代码更容易理解和更短，您可以这样做:

$("input[name='layanan']").on('change', function() {
var item_price = $("input[name=layanan]:checked").attr('data-price');
if(item_price >= 10)
{
$("#method_4").prop('disabled', false);
$("#alert_minimum_price_for_paypal").slideUp();
}
else
{

$("#method_4").prop('disabled', true);
$("#method_4").prop('checked', false);
$("#alert_minimum_price_for_paypal").slideDown();
}
});

同时，添加这一行来在某处写消息，这样人们就知道为什么他们不能选择PayPal:

<div id="alert_minimum_price_for_paypal" style="display: none;">You cannot use PayPal for payments under $10.</div>

解释一下:

• 如果有任何名称为"laynan"(你的两个无线电输入的名称)
我们将所选单选按钮的价格放入item_price变量中
• 如果价格等于或超过$10:我们删除"禁用";属性上的贝宝无线电输入+隐藏消息
• 如果价格小于$10，则添加"禁用";属性上的paypal单选输入+显示消息+取消选中paypal单选按钮，如果它被选中，以防止任何问题之后

当然，这只是JavaScript，很容易修改，所以不要忘记在服务器端代码中验证金额，以确保有人不会使用PayPal支付少于9美元的东西，即使很少有人会欺骗代码这样做…