<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<style>
.fixedSizeCoupon,.fixedCountCoupon{
	width:400px;
	display:inline-block;
}
#diySizeCoupon,#diyCountCoupon{
	width:400px;
	display:inline-block;
}
.fixedSizeCoupon .layui-input,.fixedCountCoupon .layui-input{
	width:100%
}
.fixedSizeCoupon .layui-edge,.fixedCountCoupon .layui-edge{
	right:0px
}
</style>
<input type="hidden" name="proTypeValue" class="layui-input" value="优惠券">
<p>材质</p>
<div class="layui-form-item">
	<input type="radio" name="kindValue" lay-filter="kindValue" value="2" title="300克铜版纸" checked="checked">
	<input type="radio" name="kindValue" lay-filter="kindValue" value="0" title="157克铜版纸">
</div>
<p>
	规格	
</p>
<div class="layui-form-item fixedSizeCoupon">
	<select name="size" id="fixedSizeCoupon" class="select">
		<option value="18*5.4">18*5.4 cm</option>
		<option value="15*5.4">15*5.4 cm</option>
		<option value="9*5.4">9*5.4 cm</option>
	</select>
</div>
<span class="diySizeCoupon" style="display:none">
	<input type="text" name="size" id="diySizeCoupon" placeholder="格式:长*宽" class="layui-input" autocomplete="off">
</span>
<input type="checkbox" name="switchSize" class="switchSizeCoupon" lay-filter="switchSizeCoupon" title="自定义尺寸" lay-skin="primary">
<span style="font-size:14px;color:red">输入格式: 长 * 宽</span> 
<p>
	数量（张）
</p>
<div class="layui-form-item fixedCountCoupon">
	<select name="count" class="select">
		<option value="200">200</option>
		<option value="500">500</option>
		<option value="1000">1000</option>
		<option value="2000">2000</option>
		<option value="5000">5000</option>
		<option value="10000">10000</option>
	</select>
</div>
<span class="diyCountCoupon" style="display:none">
	<input type="text" name="count" id="diyCountCoupon" placeholder="请输入整数" autocomplete="off"
		 class="layui-input" lay-verify="number">
</span>
<input type="checkbox" name="switchCount" lay-filter="switchCountCoupon" title="自定义数量" lay-skin="primary">
<p>款数</p>
<div class="layui-form-item">
	<input type="text" placeholder="请输入整数" autocomplete="off" name="number"
		id="numberCoupon" value="1" class="layui-input" lay-verify="number">
</div>
<p>
	客户旺旺
</p>
<div class="layui-form-item">
	<input type="text" placeholder="请输入客户旺旺号" autocomplete="off" name="wangwang" id="wangwang" class="layui-input">
</div>
<script>
	layui.use(['form'], function(){    
	    var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
	    
	    
	 	// 默认没有选中复选框
	    $('.switchSizeCoupon').val("off")
		// 自定义尺寸
		form.on('checkbox(switchSizeCoupon)', function(data) {
			if(data.elem.checked){
				$('.switchSizeCoupon').val("on")
				$(".diySizeCoupon").show();
				$(".fixedSizeCoupon").hide();
				$(".diySizeCoupon").find(":input").attr("disabled", false);
				$(".fixedSizeCoupon").find(":input").attr("disabled", true);
			} else {
				$('.switchSizeCoupon').val("off")
				$(".fixedSizeCoupon").show();
				$(".diySizeCoupon").hide();
				$(".fixedSizeCoupon").find(":input").attr("disabled", false);
				$(".diySizeCoupon").find(":input").attr("disabled", true);
				// 恢复标准数量的时候会被禁用，加这个解决
				form.render();
			}
		})
		// 自定义數量
		form.on('checkbox(switchCountCoupon)', function(data) {
			if(data.elem.checked){
				$(".diyCountCoupon").show();
				$(".fixedCountCoupon").hide();
				$(".diyCountCoupon").find(":input").attr("disabled", false);
				$(".fixedCountCoupon").find(":input").attr("disabled", true);		
			} else {
				$(".fixedCountCoupon").show();
				$(".diyCountCoupon").hide();
				$(".fixedCountCoupon").find(":input").attr("disabled", false);
				$(".diyCountCoupon").find(":input").attr("disabled", true);
			}
			// 恢复标准数量的时候会被禁用，加这个解决
			form.render();
		})
	})
</script>