Question

我有一个chekbox和一个textfield

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<input class="form-control" type="text" id="usr_zipcode" maxlength="10" name="usr_zipcode" required="required">

如何制作jQuery，当vehiche1被选中但usr_zipcode为空或没有值时，它将禁用另一个复选框，名为checkme：

<input type="checkbox" id="checkme">

我尝试使用下面的代码，但不起作用

$('#vehicle1').change(function () {

    var input1 = $('#usr_zipcode');

    input1.change( function() {
       var empty = ( input1.val() == '' );
       $("#checkme").prop('checked', false); 
       $("#checkme").attr('disabled','disabled');
    });
}).change();

Answer 1

创建一个单独的功能，以选中或禁用如下所示的另一个复选框

function checkOrDisableAnotherCheckBox() {
  if($('#vehicle1').is(':checked') && $('#usr_zipcode').val() == ''){
    $("#checkme").attr('disabled', true);
  } else {
    $("#checkme").removeAttr('disabled');
  }
}

$('#vehicle1').change(function () {
  checkOrDisableAnotherCheckBox();
});


$('#usr_zipcode').keyup(function () {
  checkOrDisableAnotherCheckBox();


});

Answer 2

您可以尝试我的代码：

$('#vehicle1').change(function () {
   checkEmpty();    
});

function checkEmpty(){ 

  var empty = ( $('#vehicle1').prop('checked') && $('#usr_zipcode').val() == '' );
  if (empty) {
    $("#checkme").prop('checked', false); 
    $("#checkme").attr('disabled','disabled');
  }else {
    $("#checkme").removeAttr("disabled");
  }
}

这是一个演示：https://codepen.io/phuongnm153/pen/zQavrN

如果复选框选中但输入为空则禁用另一个复选框

2 个答案: