我有一个关于jQuery验证和复选框混淆的问题。
我有一个有两个标题的表单:
问题:在“标题1”下必须选择一个选项,在“标题2”下必须选择一个选项。
通过<input type="checkbox" id="commjoin11" name="commjoin11"/>的<input type="checkbox" id="commjoin" name="commjoin"/>在“标题1”下。
Heading 1
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox通过<input type="checkbox" id="commjoin50" name="commjoin50"/>的<input type="checkbox" id="commjoin12" name="commjoin12"/>在“标题2”下。
Heading 2
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox这需要在单击"Next“按钮时进行检查<input type="submit" name="button" onclick="return ckFormJ(5); " runat=server id="button" value="Next >>">
重申,在“标题1”下必须选择一个选项,在“标题2”下必须选择一个选项。
我可以看到如何查看是否选中了一个框,但验证每个标题下是否至少选中了一个框就有点困难了。我该怎么做才能让它工作呢?
您好,我将每个组都包装在一个div标签中,这样我就可以检查每个组中至少有一个框被选中,但由于某些原因,我无法让它工作。
下面的代码没有正确显示;我如何发布HTML?
Chemistry/Urinalysis $0.00 Education $0.00 Generalist $0.00 Hematology/Hemostasis $0.00 Alabama State Society $10.00 Alaska State Society $0.00 Arizona/Nevada State Society $0.00 Arkansas State Society $0.00 JQUERY显示得很好:$("inputtype=submit").click(function () {
var length1 = $('#Scientific Assembly input[type=checkbox]:checked').length;
alert("length1=" + length1);
var length2 = $('#State Societies input[type=checkbox]:checked').length;
alert("length2=" + length2);
if (length1 == 0) {
alert("Please select at least one Scientific Assembly checkbox");
return false;
}
if (length2 == 0) {
alert("Please select at least one State Societies checkbox");
return false;
}
return true;});
发布于 2016-03-26 03:18:36
尝试用input type="radio"元素替换input type="checkbox"元素;使用fieldset元素包含input元素,将disabled属性添加到input type="submit"元素和不是使用:checked的.prop()的input type="radio"元素;当D11中的D10是D12时,删除D9属性。使用D13检查给定D15父元素中D14元素的状态。
$(".next").prop("disabled", true);
$("fieldset").each(function() {
if (!$(":checked", this).is("*")) {
$(this).addClass("notChecked")
}
});
$("form").change(function() {
var bool = false;
var checked = $(".req").each(function(i, el) {
bool = $(":radio", this).is(":checked")
});
if (bool) {
$(".next[type=submit]").prop("disabled", false);
};
$("fieldset:has(:checked)").removeClass("notChecked")
});fieldset {
width: 150px;
}
fieldset.notChecked {
border: 1px solid red;
}
fieldset.notChecked:after {
content: "Required";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form>
<fieldset class="req">
<label>Heading 1</label><br>
<input type="radio" />
<input type="radio" />
<input type="radio" />
</fieldset>
<fieldset class="req">
<label>Heading 2</label><br>
<input type="radio" />
<input type="radio" />
<input type="radio" />
</fieldset>
<input class="next" type="submit" />
</form>
https://stackoverflow.com/questions/36225983
复制相似问题