Question

我想在单击复选框时禁用div。如果当前地址和永久地址相同，则用户只需单击复选框即可禁用永久地址字段。谢谢！

<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

将以下JS添加到您的代码中。

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

您可以尝试这样的事情

    <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

以下是您如何轻松完成此操作的示例。确保此窗口中只有一个复选框。否则这不起作用，那么你需要改变一些东西。

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

纯粹的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代码

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

https://jsfiddle.net/0ba4f7jd/

Answer 5

只需创建一个在选中复选框时调用的函数，该函数将禁用div和所有子元素：

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

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

5 个答案: