复选框验证，例如我同意条款和条件jquery

Question

function toggleDisabled(target) {
  var confirm = $("input:checkbox:checked");
  if (!confirm.length > 0) {
    $("#confirm").addClass('disabled');
  } else {
    $("#confirm").removeClass('disabled');
  }
}

var $notnull = $('.notnull');

$(document).on('keyup change', '.notnull', function(e) {
  console.log(e.currentTarget)
  toggleDisabled(e.currentTarget);

});

$notnull.each(function(i, el) {
  toggleDisabled(el);
});

function reload() {
  $notnull.each(function(i, el) {
    toggleDisabled(el);
  });
}

function toggleDisabledNavButton(target) {
  var $target = $(target);

  var basic = $target.find('input').hasClass('disabled');
  if (basic) {
    $("#add").addClass('disabled');
  } else {
    $("#add").removeClass('disabled');
  }

}
var detailscontainer = $('.notnull');

$(document).on('keyup change click', 'input.notnull', function(e) {
  e.preventDefault();
  toggleDisabledNavButton($(e.currentTarget).closest('.info'));



});

detailscontainer.each(function(i, el) {
  toggleDisabledNavButton(el.closest('.info'));
});

.disabled {
  border-color: red;
  background: gray;
  //pointer-events: none;

}
input[type=checkbox].disabled {
  outline: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='info'>
  <input type="checkbox" name="" class="notnull disabled" id="confirm">
  <label for="confirm">Confirm</label>
  <input type="button" name="" value="Add" class="notnull disabled" id="add">
</div>

我想创建一个验证，例如我同意条款和条件我制作了几个函数来运行脚本。当我添加代码以检查复选框是否没有类disabled时，复选框不再被检查。我想让这个代码工作，因为我想在法律时代等验证中添加更多复选框。我无法找到我做错了什么，我无法确定为什么复选框不再被检查。

问题：

1. 为什么我的复选框没有被检查。

这是添加function toggleDisabledNavButton(target)之前的代码

function toggleDisabled(target) {
  var confirm = $("input:checkbox:checked");
  if (!confirm.length > 0) {
    $("#confirm").addClass('disabled');
  } else {
    $("#confirm").removeClass('disabled');
  }
}

var $notnull = $('.notnull');

$(document).on('keyup change', '.notnull', function(e) {
  console.log(e.currentTarget)
  toggleDisabled(e.currentTarget);

});

$notnull.each(function(i, el) {
  toggleDisabled(el);
});

function reload() {
  $notnull.each(function(i, el) {
    toggleDisabled(el);
  });
}

.disabled {
  border-color: red;
  background: gray;
  //pointer-events: none;

}
input[type=checkbox].disabled {
  outline: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='info'>
  <input type="checkbox" name="" class="notnull disabled" id="confirm">
  <label for="confirm">Confirm</label>
  <input type="button" name="" value="Add" class="notnull disabled" id="add">
</div>

预期：

1. 选中该复选框时，它应删除复选框和按钮上的红色边框。我没有看到发生的事情。现在我甚至无法勾选复选框。

Answer 1

它看起来像一个工作的。我只是复制并粘贴，没有编辑任何东西..

function toggleDisabled(target) {
  var confirm = $("input:checkbox:checked");
  if (!confirm.length > 0) {
    $("#confirm").addClass('disabled');
    $("#add").addClass('disabled');
  } else {
    $("#confirm").removeClass('disabled');
    $("#add").removeClass('disabled');
  }
}

var $notnull = $('.notnull');

$(document).on('keyup change', '.notnull', function(e) {
  console.log(e.currentTarget)
  toggleDisabled(e.currentTarget);

});

$notnull.each(function(i, el) {
  toggleDisabled(el);
});

function reload() {
  $notnull.each(function(i, el) {
    toggleDisabled(el);
  });
}

.disabled {
  border-color: red;
  background: gray;
  //pointer-events: none;

}
input[type=checkbox].disabled {
  outline: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='info'>
  <input type="checkbox" name="" class="notnull disabled" id="confirm">
  <label for="confirm">Confirm</label>
  <input type="button" name="" value="Add" class="notnull disabled" id="add">
</div>

从复选框中删除notnull类，然后会出现勾号

function toggleDisabled(target) {
  var confirm = $("input:checkbox:checked");
  if (!confirm.length > 0) {
    $("#confirm").addClass('disabled');
  } else {
    $("#confirm").removeClass('disabled');
  }
}

var $notnull = $('.notnull');

$(document).on('keyup change', '.notnull', function(e) {
  console.log(e.currentTarget)
  toggleDisabled(e.currentTarget);

});

$notnull.each(function(i, el) {
  toggleDisabled(el);
});

function reload() {
  $notnull.each(function(i, el) {
    toggleDisabled(el);
  });
}

function toggleDisabledNavButton(target) {
  var $target = $(target);

  var basic = $target.find('input').hasClass('disabled');
  if (basic) {
    $("#add").addClass('disabled');
  } else {
    $("#add").removeClass('disabled');
  }

}
var detailscontainer = $('.notnull');

$(document).on('keyup change click', 'input.notnull', function(e) {
  e.preventDefault();
  toggleDisabledNavButton($(e.currentTarget).closest('.info'));



});

detailscontainer.each(function(i, el) {
  toggleDisabledNavButton(el.closest('.info'));
});

.disabled {
  border-color: red;
  background: gray;
  //pointer-events: none;

}
input[type=checkbox].disabled {
  outline: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='info'>
  <input type="checkbox" name="" class="disabled" id="confirm">
  <label for="confirm">Confirm</label>
  <input type="button" name="" value="Add" class="notnull disabled" id="add">
</div>

Answer 2

您可能错误地使用了术语＆＃34; notnull ＆＃34;在代码的以下部分的类名中：

<div class='info'>
  <input type="checkbox" name="" class="notnull disabled" id="confirm">
  <label for="confirm">Confirm</label>
  <input type="button" name="" value="Add" class="notnull disabled" id="add">
</div>

如果你删除它，我希望你的复选框能够正常工作。

Answer 3

我刚刚更改了代码，因此我们又回到了基础。

的javascript：

$('#confirm').on('click', function() {


   if ($('#confirm').length > 0 ) {
        $('#confirm').removeClass('disabled'); // remove red border
       $('#confirm').attr('disabled', 'true'); // disable button
       $('#buttonSend').removeClass('disabled'); // remove class diabled so user can click button
  } 
  });

你是html我在按钮上添加了一个id

id="buttonSend"

例如见 https://jsfiddle.net/9Lky7ktw/