个人中心
gpt4 book ai didi

javascript - 禁用提交按钮，直到至少选中一个复选框

转载 作者：行者123 更新时间：2023-11-30 16:15:51 24 4
gpt4 key购买 nike

我有一个 foreach 循环来生成复选框，我想确保提交按钮保持禁用状态，直到用户选中至少一个复选框。但即使选中复选框后，该按钮仍处于禁用状态。

enter image description here :

这是我的jsp文件

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link rel="stylesheet" href="bootstrap.css" />
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>

<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script>
    $('#myform input:checkbox').change(function() {
        var a = $('#myform input:checked').filter(":checked").length;
        if (a == 0) {
            $('.btn').prop('disabled', true);
        } else {
            $('.btn').prop('disabled', false);
        }
    });
</script>

<style type="text/css">
body {
    background: #CCFFCC;
    !
    important;
}
/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>

<title>Resolve</title>
</head>
<body>
    <h2>Hi There!</h2>
    <h3>Browse through all unresolved issues and choose to resolve
        some:</h3>
    <div style="background-color: transparent; !important"
        class="table-responsive">
        <div class="btn-toolbar pull-right">
            <div class='btn-group'>
                <a href="back"><button class="btn btn-primary btn-lg">Back</button></a>
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>Issue Id</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th>Resolved?</th>
                </tr>
            </thead>

            <form:form class="form-horizontal" modelAttribute="ticketForm"
                action="${pageContext.request.contextPath }/contact/resolveissue"
                method="get" id="myform">

                <c:if test="${not empty form}">

                    <c:forEach var="listValue" items="${form}">
                        <tr>
                            <td>${listValue.ticketId}</td>
                            <td>${listValue.description}</td>
                            <td>${listValue.status}</td>
                            <td>
                                <div class="col-lg-10">
                                    <input type="checkbox" name="resolve"
                                        value="${listValue.ticketId}" class="form-control">
                                    <form:errors path="resolve"></form:errors>
                                </div>
                    </c:forEach>
                </c:if>

                <div class="btn-toolbar pull-right">
                    <div class='btn-group'>
                        <button type="submit" class="btn btn-primary btn-lg"
                            disabled="disabled">Resolve</button>
                    </div>
                </div>




                <!--                <button type="submit" class="btn btn-primary btn-lg center-block">Resolve</button>
 -->
            </form:form>


        </table>

    </div>

</body>
</html>

最佳答案

您必须将所有的 js/jquery 放入 ready 方法中，如下所示:

<script type="text/javascript">
$(document).ready(function(){
    $('#myform input:checkbox').change(function() {
        var a = $('#myform input:checked').filter(":checked").length;
        if (a == 0) {
            $('.btn').prop('disabled', true);
        } else {
            $('.btn').prop('disabled', false);
        }
    });


});</script>

关于javascript - 禁用提交按钮，直到至少选中一个复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35541816/

24 4 0
文章推荐： c# - 在 C# winforms 中消除继承 "magic"的最佳方法？
文章推荐： c# - Dotnet 核心的 DllImport 返回当前 DLL 的 DLLNotFoundException
文章推荐： c# - 使用实体将整个数据库导出到 .sql 文件
文章推荐： c - ESC电机不改变速度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com