使用 jQuery 验证复选框和输入文本值
Posted
技术标签:
【中文标题】使用 jQuery 验证复选框和输入文本值【英文标题】：Using jQuery to validate checkboxes and input text values 【发布时间】：2016-10-07 18:05:48 【问题描述】：我需要你的帮助，
有没有一种方法可以在启用按钮之前使用功能强大的 jQuery 来验证以下条件？
如果用户在文本框中输入一个值，然后选中其中一个复选框，则启用该按钮
如果用户在文本中已有值，然后选中其中一个复选框，则启用按钮
如何用 jQuery 编写，从我的角度来看，这将是一些冗长的表单字段检查否？
这是 html 标记：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date3">
</body>
</html>
【问题讨论】：
是的，jQuery - 以及纯 javascript - 绝对可以做到这一点。你在哪里卡住了，你走了多远，出了什么问题，如何“出错了”？ 【参考方案1】：这可能会让您入门。您可以根据需要使字段验证变得复杂或简单。
$('input[type=checkbox]').click(function()
var tmp = $(this).next('input').val();
//validate tmp, for example:
if (tmp.length > 1)
//alert('Text field has a value');
$('#mybutt').prop('disabled',false);
else
//alert('Please provide a long value in text field');
$('#mybutt').prop('disabled', true);
$(this).prop('checked',false);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="mybutt" type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date3">【讨论】：
@mmcrae 不，我不认为是这样......我在示例中使用了该 ID，它通常会带着笑容结束。怀疑是因为我回答了一个OP自己没有尝试过的问题。 不过，我不在乎，因为我自己曾经去过那里并且记得很清楚。【参考方案2】：试试这个方法..
$('input').on('change input', function()
$input = $('input');
$button = $('input[type="button"]');
var arr = [];
$input.each(function()
if ($(this).attr('type') !== 'button')
arr.push(check($(this)));
arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
)
)
function check(elem)
if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
return false;
$('input').on('change input', function()
$input = $('input');
$button = $('input[type="button"]');
var arr = [];
$input.each(function()
if ($(this).attr('type') !== 'button')
arr.push(check($(this)));
arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
)
)
function check(elem)
if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
return false;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date3">【讨论】：
以上是关于使用 jQuery 验证复选框和输入文本值的主要内容，如果未能解决你的问题，请参考以下文章
什么是 jQuery，我可以在弹出窗口中显示选定复选框、下拉列表和翻转开关的文本值
如果 php 和 jQuery 选中或未选中，则在 php 中动态创建复选框值
当输入填充有 jQuery Validate 插件时，从复选框中删除“必需”
:blank 选择器不适用于复选框 jQuery Validate()