禁用提交按鈕，直到選中至少一個復選框

Question

我有一個foreach循環來生成復選框，並且我想確保在用戶選中至少一個復選框之前，提交按鈕保持禁用狀態。 但是即使選中了復選框，該按鈕仍保持禁用狀態。

：

這是我的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>

Answer 1

您必須將所有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>

Answer 2

這應該可以解決問題：

$(function(){
  $("#myform").on("change", "input", function(){
    status=($("#myform").find("input:checked").length==0)?"disabled":"";
    $("button").prop("disabled", status);
  })
})

這是小提琴演奏。

禁用提交按鈕，直到選中至少一個復選框

問題描述

2 個解決方案

解決方案1
1 2016-02-21 21:15:49

解決方案2
1 2016-02-21 21:19:58

禁用提交按鈕，直到選中至少一個復選框

問題描述

2 個解決方案

解決方案1 1 2016-02-21 21:15:49

解決方案2 1 2016-02-21 21:19:58

解決方案1
1 2016-02-21 21:15:49

解決方案2
1 2016-02-21 21:19:58