如何在同一个html中禁用不同的复选框？

时间：2016-09-05 13:59:03

标签： javascript html 

<div id="Page1">
    <p><strong><em>(*) 1 ) Page 1 Question 1</em></strong>
    </p>
</div>
<br>
<br>


<div id="Checklist1B7">
    <table class="c1">
        <tr>
            <td width="1%"><label class="c1"><input id="QUESTION1A1" name="S1A" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c4" for="QUESTION1A1">Strongly Disagree</label>
                </div>
            </td>

            <td width="1%"><label class="c2"><input id="QUESTION1A2" name="S1B" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c5" for="QUESTION1A2">Disagree</label>
                </div>
            </td>

            <td width="1%"><label class="c3"><input id="QUESTION1A3" name="S1C" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c6" for="QUESTION1A3">Undecided</label>
                </div>
            </td>
        </tr>


        <tr>
            <td width="1%"><label class="c1"><input id="QUESTION1A4" name="S1D" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c4" for="QUESTION1A4">Agree</label>
                </div>
            </td>

            <td width="1%"><label class="c2"><input id="QUESTION1A5" name="S1E" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c5" for="QUESTION1A5">Strongly Agree</label>
                </div>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var num_checked = $("input[type=checkbox]:checked").length;
if (num_checked > 2) {
alert("sorry, you have already selected more than max !" );
$(e.target).attr('checked',false);
}
});
</script>

<p><strong><em>2 ) Page 1 Question 2</em></strong>
</p>
<br>
<br>


<div id="Checklist2B7">
    <table class="c1">
        <tr>
            <td width="1%"><label class="c1"><input id="QUESTION2A1" name="S2A" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c4" for="QUESTION2A1">Monday</label>
                </div>
            </td>

            <td width="1%"><label class="c2"><input id="QUESTION2A2" name="S2B" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c5" for="QUESTION2A2">Tuesday</label>
                </div>
            </td>

            <td width="1%"><label class="c3"><input id="QUESTION2A3" name="S2C" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c6" for="QUESTION2A3">Wednesday</label>
                </div>
            </td>
        </tr>


        <tr>
            <td width="1%"><label class="c1"><input id="QUESTION2A4" name="S2D" type=
            "checkbox" value="4"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c4" for="QUESTION2A4">Thursday</label>
                </div>
            </td>

            <td width="1%"><label class="c2"><input id="QUESTION2A5" name="S2E" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c5" for="QUESTION2A5">Friday</label>
                </div>
            </td>

            <td width="1%"><label class="c3"><input id="QUESTION2A6" name="S2F" type=
            "checkbox"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c6" for="QUESTION2A6">Saturday</label>
                </div>
            </td>
        </tr>


        <tr>
            <td width="1%"><label class="c1"><input id="QUESTION2A7" name="S2G" type=
            "checkbox" value="7"></label>
            </td>

            <td width="15%">
                <div class="c2">
                    <label class="c4" for="QUESTION2A7">Sunday</label>
                </div>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
$(document).on("click", "input[type=checkbox]", function(e) {
var num_checked = $("input[type=checkbox]:checked").length;
if (num_checked > 4) {
alert("sorry, you have already selected more than max !" );
$(e.target).attr('checked',false);
}
});
</script>

<table class="c2">
    <tr>
        <td>
            <div class="c5">
                <label class="c5"><button type="submit"><label class=
                "c5">NEXT</label></button></label>
            </div>
        </td>
    </tr>
</table>


<div class="c9">
    <label>1</label>
</div>


<p id="demo">
</p>

如果选中了两个以上的复选框，我想要禁用第一个问题的复选框并且它正常工作但我的主要问题是，如果它发生了，它会阻止选择相同的所有复选框但是你必须检查少于4的问题。

1 个答案:

答案 0 :(得分：-2)

如果您定位input[type=checkbox]，那么它将指向DOM中的每个复选框

所以我将每个问题中所有复选框的名称都设为相同

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />
    <meta http-equiv="content-type" content="text/html; charset=windows-1254" />
    <meta http-equiv="content-type" content="text/html; charset=x-mac-turkish" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="/styles/_reset.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/styles/main3.css" />
</head>

<body>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <div id="Page1">
        <p><strong><em>(*)  1 ) Page 1 Question 1</em></strong></p>
    </div>
    <br></br>
    <br></br>
    <div id="Checklist1B7">
        <table class="c1">
            <tr>
                <td width="1%">
                    <label class="c1">
                        <input type="checkbox" name="S1" id="QUESTION1A1" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION1A1" class="c4">
                            Strongly Disagree</label>
                    </div>
                </td>
                <td width="1%">
                    <label class="c2">
                        <input type="checkbox" name="S1" id="QUESTION1A2" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION1A2" class="c5">
                            Disagree</label>
                    </div>
                </td>
                <td width="1%">
                    <label class="c3">
                        <input type="checkbox" name="S1" id="QUESTION1A3" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION1A3" class="c6">
                            Undecided</label>
                    </div>
                </td>
            </tr>
            <tr>
                <td width="1%">
                    <label class="c1">
                        <input type="checkbox" name="S1" id="QUESTION1A4" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION1A4" class="c4">
                            Agree</label>
                    </div>
                </td>
                <td width="1%">
                    <label class="c2">
                        <input type="checkbox" name="S1" id="QUESTION1A5" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION1A5" class="c5">
                            Strongly Agree </label>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
    $(document).on("click", "input[type=checkbox]", function(e) {
        var QUS1 = $("input[name=S1]:checked").length;
        if (QUS1 > 2) {
            alert("sorry, you have already selected more than max !");
            $(e.target).attr('checked', false);
        }
         var QUS2 = $("input[name=S2]:checked").length;
        if (QUS2 > 4) {
            alert("sorry, you have already selected more than max !");
            $(e.target).attr('checked', false);
        }
    });
    </script>
    <p><strong><em>2 ) Page 1 Question 2</em></strong></p>
    </div>
    <br></br>
    <br></br>
    <div id="Checklist2B7">
        <table class="c1">
            <tr>
                <td width="1%">
                    <label class="c1">
                        <input type="checkbox" name="S2" id="QUESTION2A1" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION2A1" class="c4">
                            Monday</label>
                    </div>
                </td>
                <td width="1%">
                    <label class="c2">
                        <input type="checkbox" name="S2" id="QUESTION2A2" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION2A2" class="c5">
                            Tuesday</label>
                    </div>
                </td>
                <td width="1%">
                    <label class="c3">
                        <input type="checkbox" name="S2" id="QUESTION2A3" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION2A3" class="c6">
                            Wednesday</label>
                    </div>
                </td>
            </tr>
            <tr>
                <td width="1%">
                    <label class="c1">
                        <input type="checkbox" name="S2" value="4" id="QUESTION2A4" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION2A4" class="c4">
                            Thursday</label>
                    </div>
                </td>
                <td width="1%">
                    <label class="c2">
                        <input type="checkbox" name="S2" id="QUESTION2A5" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION2A5" class="c5">
                            Friday</label>
                    </div>
                </td>
                <td width="1%">
                    <label class="c3">
                        <input type="checkbox" name="S2" id="QUESTION2A6" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION2A6" class="c6">
                            Saturday</label>
                    </div>
                </td>
            </tr>
            <tr>
                <td width="1%">
                    <label class="c1">
                        <input type="checkbox" name="S2" value="7" id="QUESTION2A7" />
                    </label>
                </td>
                <td width="15%">
                    <div class="c2">
                        <label for="QUESTION2A7" class="c4">
                            Sunday</label>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    
    <table class="c2">
        <tr>
            <td>
                <div class="c5">
                    <label class="c5">
                        <button type="submit">NEXT
                        </button>
                    </label>
                </div>
            </td>
        </tr>
    </table>
    <div class="c9">
        <label>1</label>
    </div>
    </form>
    <p id="demo"></p>
    </div>
    </form>
</body>

</html>

相关问题
最新问题