如何通过js动态实现根据checkbox是否勾选来设置input状态是可输入或者只读？

Question

<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>  

这样还是不行，不知道是哪里错了

Answer 1

<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");
    }
});

Answer 2

     $("#return").change(function(){
            var ischecked = $(this).prop("checked");
            if (ischecked){
                $("#returndate").attr("readonly", "readonly");

            } else {
                $("#returndate").removeAttr("readonly");
            }
       });