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

Posted 2023-05-09

【中文标题】复选框验证，如我同意条款和条件 jquery

【英文标题】：checkbox validation like I Agree to the Terms and Condition jquery

【发布时间】：2016-02-18 17:05:53

【问题描述】：

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 时，复选框不再被选中。我想让这段代码工作，因为我想在验证中添加更多复选框，比如法定年龄等。我找不到我做错了什么，我无法确定为什么不再检查复选框。

问题：

为什么我的复选框没有被选中。

这是添加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>

预期：

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

【问题讨论】：

那么你想要的行为是什么？

加载时，当我 click on the checkbox and it is checked 删除复选框上的禁用时，它们都禁用了类。然后在按钮上单击检查复选框是否已禁用类，如果未提交。没有function toggleDisabledNavButton(target) 在我添加后它工作正常，复选框不能再被选中@lordkain

@lordkain 更新了问题，以便您看到差异

你不用按钮做任何事情！您只需更改复选框的类别。给你按钮一个 id，然后添加删除 disabled 属性的 soem 脚本

添加了一个答案，请将最佳答案标记为有效，这可能对以后遇到同样问题的用户有所帮助！ @马丁1

【参考方案1】：

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

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

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

【讨论】：

不是因为默认情况下我添加了该类，以便在加载时将其禁用。如您在第二个示例中看到的那样，只有选中该复选框，它才会删除禁用的类

【参考方案2】：

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

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>

【讨论】：

你怎么解释，因为toggleDisabled(target) 应该接受这一点。当我没有这个function toggleDisabledNavButton(target) 时，当我添加它时它工作得很好，它开始表现得像这样没有得到检查

当复选框被选中时，它应该删除复选框和按钮上的红色边框。我没有看到发生的事情

它是因为你没有指定任何东西来删除提交按钮上的红色标记，我已经编辑了它，现在它可以工作了

【参考方案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/

【讨论】：

我希望我的代码能够正常工作，这与我的代码不同...我在问为什么我不能选中我的复选框以不创建新代码