【问题标题】:checkbox validation like I Agree to the Terms and Condition jquery复选框验证,如我同意条款和条件 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 时,复选框不再被选中。我想让这段代码工作,因为我想在验证中添加更多复选框,比如法定年龄等。我找不到我做错了什么,我无法确定为什么不再检查复选框。

问题:

  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. 当复选框被选中时,它应该删除复选框和按钮上的红色边框。我没有看到正在发生的事情。现在我什至无法选中复选框。

【问题讨论】:

  • 那么你想要的行为是什么?
  • 加载时,当我 click on the checkbox and it is checked 删除复选框上的禁用时,它们都禁用了类。然后在按钮上单击检查复选框是否已禁用类,如果未提交。没有function toggleDisabledNavButton(target) 在我添加后它工作正常,复选框不能再被选中@lordkain
  • @lordkain 更新了问题,以便您看到差异
  • 你不用按钮做任何事情!您只需更改复选框的类别。给你按钮一个 id,然后添加删除 disabled 属性的 soem 脚本
  • 添加了一个答案,请将最佳答案标记为有效,这可能对以后遇到同样问题的用户有所帮助! @马丁1

标签: jquery validation checkbox


【解决方案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/

【讨论】:

  • 我希望我的代码能够正常工作,这与我的代码不同...我在问为什么我不能选中我的复选框以不创建新代码
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-01-12
  • 1970-01-01
  • 1970-01-01
  • 2015-12-06
  • 2019-02-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多