Question

我有2个复选框，如下所示。只有选中第一个，才能点击第二个。我设法做到了。

但如果第一个未选中，则应禁用第二个并取消选中。

$(document).ready(function() {
  var ckbox = $('#optin');

  $('input').on('click', function() {
    if (ckbox.is(':checked')) {
      $('#tc').removeAttr('disabled'); //enable input

    } else {
      $('#tc').prop('checked', false); //remove check
      $('#tc').removeAttr('checked'); //disable input

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="optin" id="optin" class="required">
<label for="optin"> Checkbox1 </label>

<input type="checkbox" name="tc" id="tc" class="" disabled="disabled">
<label for="tc"> Checkbox2  </label>

Answer 1

我这样做：

＆＃13;

$(document).ready(function() {
  $('input').on('click', function() {
    $('#tc').prop({
      'checked': $('#optin').is(':checked'),
      'disabled': !$('#optin').is(':checked')
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="optin" id="optin" class="required">
<label for="optin"> Checkbox1 </label>

<input type="checkbox" name="tc" id="tc" class="" disabled="disabled">
<label for="tc"> Checkbox2  </label>

＆＃13;

Answer 2

在else中，您尝试删除已检查的属性。而是将disabled属性设置为true。

＆＃13;

$(document).ready(function() {
  var ckbox = $('#optin');

  $('input').on('click', function() {
    if (ckbox.is(':checked')) {
      $('#tc').removeAttr('disabled'); //enable input

    } else {
      $('#tc').prop('checked', false); //remove check
      $('#tc').prop('disabled', true); //disable input

    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="optin" id="optin" class="required">
<label for="optin"> Checkbox1 </label>

<input type="checkbox" name="tc" id="tc" class="" disabled="disabled">
<label for="tc"> Checkbox2  </label>

＆＃13;

jquery复选框禁用/取消选中

2 个答案: