首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带有复选框的jQuery验证方案,包含两个部分

带有复选框的jQuery验证方案,包含两个部分
EN

Stack Overflow用户
提问于 2016-03-26 02:44:20
回答 2查看 73关注 0票数 1

我有一个关于jQuery验证和复选框混淆的问题。

我有一个有两个标题的表单:

问题:在“标题1”下必须选择一个选项,在“标题2”下必须选择一个选项。

通过<input type="checkbox" id="commjoin11" name="commjoin11"/><input type="checkbox" id="commjoin" name="commjoin"/>在“标题1”下。

代码语言:javascript
运行
复制
Heading 1
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox

通过<input type="checkbox" id="commjoin50" name="commjoin50"/><input type="checkbox" id="commjoin12" name="commjoin12"/>在“标题2”下。

代码语言:javascript
运行
复制
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?

代码语言:javascript
运行
复制
                                      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 () {

代码语言:javascript
运行
复制
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;

});

EN

Stack Overflow用户

发布于 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元素的状态。

代码语言:javascript
运行
复制
$(".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")
});
代码语言:javascript
运行
复制
fieldset {
  width: 150px;
}
fieldset.notChecked {
  border: 1px solid red;
}
fieldset.notChecked:after {
  content: "Required";
}
代码语言:javascript
运行
复制
<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>

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36225983

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档