单击复选框时如何禁用文本框？

Question

I wanted to disable the div when i click the the checkbox. if the current address and permanent address are the same, the user just click the check box to disabled the field of the permanent address. Thanks!

<div class="col-sm-5">
        <div class="checkbox">
            <label>
                <input type="checkbox">Current and Permanent Address are the same.
            </label>
        </div>
    </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"
                    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="gender">
                 <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>

Answer 1

Add the following JS to your code.

 $(document).ready(function(){ $('input[type="checkbox"]').change(function(){ $('.permanentAdd').attr('disabled','disabled'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-sm-5"> <div class="checkbox"> <label> <input type="checkbox">Current and Permanent Address are the same. </label> </div> </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 permanentAdd" rv-value="address:address" 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="gender"> <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> 

Answer 2

You can try something like this

    <input type="checkbox" id="check_box" onchange="set_status();">
            <div class="col-md-4">
                          <div class="form-group">
                             <label class="control-label" for="postalCode">Postal
                             Code</label> <div id="txt_field" name="txt_field"> </div>   

                <script type="text/javascript">


function set_status() {
        var appendData = '';
        var checkbox = document.getElementById("check_box");
        if (checkbox.checked == true) {
            appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" readonly="readonly" data-validate="required"   placeholder="Zip Code" />';
        }
        else {
            appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" data-validate="required"   placeholder="Zip Code" />';
        }
        window.jQuery('#txt_field').html(appendData);

    }

            </script>
</div>
           </div>
        </div>
     </div>

Answer 3

Here is the example how you do this thing easy. make sure you have only one checkbox in this window. else this not working, then you need to change something.

jQuery

$( "input[type=checkbox]" ).on( "click", function(){
    var n = $("input[type=checkbox]:checked").length;
    if(n){
        $(".permanent-address").attr("disabled", 'disabled');
    }else{
        $(".permanent-address").removeAttr("disabled");
    }
});

HTML

<div class="checkbox">
    <label>
        <input type="checkbox">Current and Permanent Address are the same.
    </label>
</div>

<input class="form-control permanent-address" rv-value="address:address" name="model.cid" data-validate="required" />

Answer 4

Pure javascript anwser

function checkAddress(checkbox) {
  var inputs = document.querySelectorAll('input:not([type=checkbox])');
  var selects = document.querySelectorAll('select');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = checkbox.checked;
  }
  for (var i = 0; i < selects.length; i++) {
    selects[i].disabled = checkbox.checked;
  }
}

HTML code

<input type="checkbox" onclick="checkAddress(this)">

https://jsfiddle.net/0ba4f7jd/

Answer 5

Simply create a function that gets called when the checkbox is checked, which disables the div and all child elements:

 $('#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); } }); 

DEMO