如何通过js动态实现根据checkbox是否勾选来设置input状态是可输入或者只读?
问题描述:
<div class="form-group "style="margin-left: 8%;">
<label for="return">Defect part return</label>
<input type="checkbox"name="return1" style="margin-left: 20px;"id="return"/> /*checkbox勾,那么后面两个可以输入,反之就是只读状态*/
</div>
<div class="form-group"style="margin-left: 5%;">
<label>Return Qty</label>
<input type="text" class="form-control "name="return2"style="margin-left: 20px;" />
</div>
<div class="form-group"style="margin-left: 5%;">
<label >Return date</label>
<input type="text" class="form-control " placeholder="请选择日期" id="returndate"style=" height:35px; line-height: 25px;margin-left: 20px;width: 150px;">
</div>
这样还是不行,不知道是哪里错了
答
<input type="checkbox" id="return"/>
<input type="text" class="form-control" id="input1" />
<input type="text" class="form-control" id="input2" />
$("#return").click(function(){
var ischecked = $(this).prop("checked");
if (ischecked){
$("#input1").attr("readonly", "readonly");
$("#input2").attr("readonly", "readonly");
} else {
$("#input1").removeAttr("readonly");
$("#input2").removeAttr("readonly");
}
});
答
$("#return").change(function(){
var ischecked = $(this).prop("checked");
if (ischecked){
$("#returndate").attr("readonly", "readonly");
} else {
$("#returndate").removeAttr("readonly");
}
});