隐藏结账按钮,直到选择发货选项
Hide checkout button until shipping option is chosen?
我使用的是simpleCart js。我想隐藏结账按钮和运费,直到客户选择英国或世界其他地区。这是选择块:
<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>
下面是运费和结账按钮:
<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>
生成购物车的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>
我想我可以使用$('.place_order').css('display', 'inline');
来更改内联样式,但我不知道该怎么做,是将它合并到simpleCart脚本中,还是让它触发一个单独的脚本?也许还有更有效的方法?谢谢
这就是你的意思吗?
$('.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在类/id名称中使用空格是不好的做法。
在我看来,最好禁用/启用按钮,而不是隐藏或显示它
$('.simpleCart_checkout btnDownload').attr('disabled', true);
相关文章:
- CKeditor:更改对话框中的默认选择选项
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- AngularJs列表ng单击以选择选项转换
- 使用基于文本的 Jquery 选择选项
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 选择选项时如何显示警报
- 使用php动态更改选择选项
- 选择“选择选项”时显示文本.怎么做
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用js将动态内容添加到选择选项列表中
- 用于使用javascript循环选择选项
- AngularJS-选择选项并在函数中使用它
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 选择选项是添加或删除事件
- 使用jQuery向“选择选项”添加默认属性
- 构建HTML选择字段并使用JavaScript数组选择选项
- 带有动态选择选项的Firefox html5验证异常
- 只有当Angular从资源对象检索数据时,才选择选项元素