添加判断是否满足加入购物车条件来控制按钮的可用状态
实例
<!DOCTYPE HTML>
<html>
<head>
<title>点击商品选中效果</title>
<meta charset="utf-8"/>
<link rel="icon" type="image/x-icon" href="images/2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
* {margin: 0px auto;padding: 0px;}
.top {width: 402px;height: 35px;
line-height: 35px;text-align:center;
margin-top: 50px;
background: #C40000;color:#fff;
}
.main {width: 400px;height: 400px;border: 1px solid #C40000;}
p {width: 400px;height: 26px;margin-top:10px;}
b {width: 90px;height: 26px;
line-height: 26px;text-align: center;
font-size: 12px;color:#838383;
border: 1px solid #ccc;
float: left;margin-left: 5px;}
span {width: 90px;height: 26px;line-height: 26px;
text-align: center;font-size: 12px;
color:#838383;border: 1px solid #ccc;
display: block;float: left;margin-left: 5px;}
span:hover {cursor: pointer;}
button {width: 120px;height: 35px;background: #C40000;color: white;border: 0px;}
button:hover {cursor: pointer;}
.notice{
border:0px;
}
.select{
border: 1px solid #C40000;
}
.bu2{
background: #ccc;
}
</style>
</head>
<body>
<div class="top">请选择信息后加入购物车</div>
<div class="main">
<p class="item" name="version">
<b class="notice">版本</b>
<!-- <span>ONE A2001</span>
<span>ONE A0001</span>
<span>ONE A1001</span> -->
</p>
<p class="item" name="color">
<b class="notice">机身颜色</b>
<span>白色</span>
<span>黑色</span>
<span>金色</span>
</p>
<p class="item" name="type">
<b class="notice">套餐类型</b>
<span>标配</span>
<span>套餐一</span>
<span>套餐二</span>
</p>
<p class="item" name="ram">
<b class="notice">运行内存</b>
<span>2GB</span>
<span>3GB</span>
<span>4GB</span>
</p>
<p class="item" name="rom">
<b class="notice">机身内存</b>
<span>16GB</span>
<span>32GB</span>
<span>64GB</span>
</p>
<p class="item" name="location">
<b class="notice">产地</b>
<span>中国大陆</span>
<span>港澳台</span>
</p>
<p class="item" name="price">
<b class="notice">价格</b>
<span>999元抢购</span>
</p>
<p class="item1" name="num">
<b class="notice">数量</b>
<input type="number" value="1" style="width:40px;height:26px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1 bu2" id='sub' disabled>加入购物车</button>
</p>
</div>
<script>
var data = [
{version: 'ONE A2001'},
{version: 'ONE A0001'},
{version: 'ONE A1001'}
];
$(document).ready(function () {
for (let index = 0; index < data.length; index++) {
$("p[name='version']").append("<span>"+data[index].version+"</span>");
}
$(".item>span,.item1>input").on("click keyup", function () {
if ($(this).hasClass("select")) {
$(this).removeClass("select");
}else{
$(this).addClass("select").siblings(".select").removeClass("select");
}
if($(".item").children(".select").length < 7) {
$("#sub").addClass("bu2");
$("#sub").attr("disabled",true);
} else {
$("#sub").removeClass("bu2");
$("#sub").removeAttr("disabled");
}
if($(".item1 input").val() <=0){
$("#sub").addClass("bu2");
$("#sub").attr("disabled",true);
}
});
$(".bu1").click(function (e) {
let from = {};
let flag = true;
//遍历每一个item类的标签
$(".item").each(function () {
if ($(this).children(".select").length != 1) {
flag = false;
alert($(this).find(".notice").text()+"未选中")
return false;
} else {
let key = $(this).attr("name");
let val = $(this).find(".select").text();
from[key] = val;
}
});
if($(".item1 input").val() <=0){
flag = false;
alert("数量不能小于0");
}else{
from["number"] = $(".item1 input").val();
}
if(flag){
console.log(from)
alert("加入购物车成功");
$(".main span").removeClass("select");
}
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
