[英]Hide checkout button until shipping option is chosen?
I am using simpleCart js. 我正在使用simpleCart js。 I would like to have the checkout button and shipping cost hidden until the customer selects UK or Rest of World. 在客户选择英国或世界其他地区之前,我希望隐藏结帐按钮和运费。 Here is the select block: 这是选择块:
<select id="shippingSelect" onchange="simpleCart.update();">
<option value="nothing" selected="selected">Choose Shipping Location</option>
<option value="uk">UK</option>
<option value="world">Rest of World</option>
</select>
Under that is the shipping cost and checkout button: 在此下方是运费和结帐按钮:
<div class="place_order" style="display:none">
<span id="simpleCart_shipping" class="simpleCart_shipping"></span>
<a href="javascript:;" class="simpleCart_checkout btnDownload">checkout</a>
</div>
The simpleCart script that generates the cart: 生成购物车的simpleCart脚本:
<script>
simpleCart({
cartColumns: [
{ attr: "name" , label: "Item" },
{ view: "decrement" , label: false , text: "-" },
{ attr: "quantity", label: "Quantity", view: "input"},
{ view: "increment" , label: false , text: "+" },
{ attr: "price", label: "Price"},
{ attr: "total" , label: "Subtotal", view: "currency" }
],
cartStyle: "table",
currency: "GBP",
language: "english-us",
checkout: {
type: "PayPal" ,
email: "email@ddress",
success: "success.html"
},
shippingCustom: function(){
if( $("#shippingSelect").val() == "uk" ){
return 0;
} else {
return 2;
}
}
});
</script>
I thought I could use $('.place_order').css('display', 'inline');
我以为我可以使用$('.place_order').css('display', 'inline');
to change the inline style but I don't know how to do it, whether to incorporate it into the simpleCart script or have it trigger a separate script? 更改内联样式,但是我不知道该怎么做,是否将其合并到simpleCart脚本中还是让它触发单独的脚本? Perhaps there is a more efficient way? 也许有一种更有效的方法? Thanks! 谢谢!
Is this what you mean? 你是这个意思吗?
$('.simpleCart_checkout btnDownload').hide(); //hide your element upon intial page load
$('#shippingselect').change(function() {
if ($(this).val() != "nothing") {
$('.simpleCart_checkout btnDownload').show(); //show element if shipping option selected
} else {
$('.simpleCart_checkout btnDownload').hide();
}
});
AFAIK it is bad practice to have spaces in class/id names. AFAIK,不好的做法是在类/ ID名称中包含空格。
It would be better in my opinion to disable/enable the button instead of hiding or showing it. 我认为最好禁用/启用按钮,而不是隐藏或显示按钮。
$('.simpleCart_checkout btnDownload').attr('disabled', true);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.