如何使用复选框清除文本字段

时间:2016-02-19 04:18:00

标签: javascript jquery html checkbox

在我的代码中,当我单击复选框时,它禁用了文本字段。但我的问题是当用户首先在文本字段中输入并且他/她选中复选框时,用户在文本字段中输入的值仍然存在但已经被禁用。我想清除文本字段并在单击复选框时禁用它。这是我的代码

<div class="checkbox">
                    <label>
                    <input type="checkbox" id="checkbox">Same as Current Address.
                    </label>    
                 </div>
                 <div id="everything">
                    <div class="col-sm-5">
                    </div>
                    <div rv-each-address="applicant:personal_information:addresses">
                       <div class="row">
                          <div class="col-md-8">
                             <div class="form-group">
                                <label class="control-label"><strong  rv-text="address:description">Permanent Address</strong></label>
                                <input class="form-control" rv-value="address:address" id="permanentAddress"
                                   name="model.cid" data-validate="required" />
                             </div>
                          </div>
                          <div class="col-md-4">
                             <div class="form-group">
                                <label class="control-label" for="city">City</label> <input
                                   rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
                                   id="city" data-validate="required"
                                   placeholder="Current city" />
                             </div>
                          </div>
                       </div>
                       <div class="row">
                          <div class="col-md-4">
                             <div class="form-group">
                                <label class="control-label" for="state">Province</label> <input
                                   rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
                                   name="province" class="form-control typeahead">
                             </div>
                          </div>
                          <div class="col-md-4">
                             <div class="form-group">
                                <label class="control-label" for="country">Country</label> 
                                <select name="gender" class="form-control" id="country">
                                   <option value="" disabled selected>Country</option>
                                   <option>Philippines</option>
                                   <option>Hong Kong</option>
                                   <option>South Korea</option>
                                   <option>Singapore</option>
                                   <option>China</option>
                                </select>
                             </div>
                          </div>
                          <div class="col-md-4">
                             <div class="form-group">
                                <label class="control-label" for="postalCode">Postal
                                Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
                                   id="postalCode" data-validate="required"
                                   placeholder="Zip Code" />
                             </div>
                          </div>
                       </div>
                    </div>
                 </div>
                 <script>
                    jQuery(document).ready(function($) {
                     $('#checkbox').change(function(){
                            var div = $('#everything');
                          if (div.attr('class')!="disabled") {
                              div.addClass("disabled");
                              $("#everything *").attr("disabled", true);
                          }
                          else {
                            div.removeClass("disabled");
                            $('#everything *').attr('disabled',false);
                          }
                        });

                            $("#checkbox").change(function() {
                                if ($(this).not(":checked")) {
                                    $('#postalCode,#city,#province').val("");
                                } 
                            });
                    });
                 </script> 

0 个答案:

没有答案