javascript - javascript 中的 Dropdowncheckboxes 选定值验证

Question

我有一个 DropDownCheckBoxes，我可以在其中检查列表中的多个项目。现在我想要的是，

对选定的多个项目进行按钮单击验证必须来自同月，如果所选项目不是来自同一个月，则应提示一条警告消息，要求选择同一个月的项目.

例如:- 如果列表中第一个选择的项目是四月，那么用户必须仅选择四月的下一个项目，如果选择了其他月份，则应该抛出警报消息。

这是我的 DropDownCheckBoxes 的屏幕截图

[![DropDownCheckBoxes][1]][1]

下面是我的代码，我首先尝试获取列表的选定值，但出现错误

Line: 13 Error: 'options' is null or not an object

查看我的代码的 js fiddle [此处][2]

请提出问题所在以及如何在按钮单击上验证用户。

Answer 1

所以我看了一下你的代码。因为我不知道你想要用普通的 Javascript 或 jQuery 来实现，所以我冒昧地用 jQuery 来实现(因为它更容易)。

此外，我不知道您的代码的真正目的，所以我根据您的示例和您提供给我们的信息来编写它。这可能会让您了解如何完成任务。

运行下面的代码片段或者看看这个 fiddle .

/* Slide open menu and change arrow direction */
$("#caption").click(function() {
    $("#cmbEmp_Name_dv").slideToggle();
    $("#down, #up").toggle();
});

/* On change disable all checkboxes from different months */
$("input[type='checkbox']").change(function() {
    var amountChecked = $("input[type='checkbox']:checked").length;
    if (amountChecked === 1) {
        var month = getMonth($(this).next().html());
        $("input[type='checkbox']").each(function() {
            var myMonth = getMonth($(this).next().html());
            if (month !== myMonth) {
                $(this).prop("disabled", true);
                $(this).next().css("background-color", "gray");
            }
        });
    }

    if (amountChecked === 0)
        $("input[type='checkbox']").prop("disabled", false).next().css("background-color", "transparent");
});

/* Function to check if all checked options are from the same month */
$("#btnSubmit").click(function() {
    var firstSelected = $("input:checked").first().next().html();
    if (firstSelected !== undefined && firstSelected !== "undefined" && firstSelected && firstSelected != "") {
        var firstMonth = getMonth(firstSelected);
        var isNotEqual = false;

        $("input:checked").each(function() {
            var month = getMonth($(this).next().html());

            if (firstMonth !== month)
                isNotEqual = true;
        });

        if (isNotEqual)
            alert("Please check items from the month " + firstMonth);
        else
            alert("Validation complete - good to go!");
    }
	else
	{
		alert("Select an option first!");
		$("#cmbEmp_Name_dv").slideDown();
	}
});



/* Function to strip off all characters and return the month */
function getMonth(html) {
    var monthPart = html.split("(").length > 1 ? html.split("(")[1] : "-";
    return monthPart.substr(0, monthPart.indexOf("-")).trim();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmbEmp_Name_sl" class="dd_chk_select" style="display:inline-block;position:relative;width:55%;">
    <div id="caption">
	Select <span id="down">&darr;</span><span id="up" style="display: none;">&uarr;</span>
    </div>
    <div id="cmbEmp_Name_dv" class="dd_chk_drop" style="display:none;position:absolute;width:500px;">
        <div id="checks" style="height:45%;">
				<input id="cmbEmp_Name_0" type="checkbox" name="cmbEmp_Name$0" />
				<label for="cmbEmp_Name_0">--Select--</label><br />
				
				<input id="cmbEmp_Name_1" type="checkbox" name="cmbEmp_Name$1" />
				<label for="cmbEmp_Name_1">ANIL VITTHAL GAWADE-312(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_2" type="checkbox" name="cmbEmp_Name$2" />
				<label for="cmbEmp_Name_2">ANURADHA A. DESHMUKH-53(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_3" type="checkbox" name="cmbEmp_Name$3" />
				<label for="cmbEmp_Name_3">ASMA SIDDIQUI-83(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_4" type="checkbox" name="cmbEmp_Name$4" />
				<label for="cmbEmp_Name_4">DEEPTI MAITHIL-1250(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_5" type="checkbox" name="cmbEmp_Name$5" />
				<label for="cmbEmp_Name_5">GAURAV JHUNJHUNWALA-2222(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_6" type="checkbox" name="cmbEmp_Name$6" />
				<label for="cmbEmp_Name_6">HITESH PANCHAL-253(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_7" type="checkbox" name="cmbEmp_Name$7" />
				<label for="cmbEmp_Name_7">JAGDISH UBARE-362(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_8" type="checkbox" name="cmbEmp_Name$8" />
				<label for="cmbEmp_Name_8">JAIDEEP MAHAKAL-134(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_9" type="checkbox" name="cmbEmp_Name$9" />
				<label for="cmbEmp_Name_9">JASMINE RATHOD-228(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_10" type="checkbox" name="cmbEmp_Name$10" />
				<label for="cmbEmp_Name_10">JIGAR SHAH-358(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_11" type="checkbox" name="cmbEmp_Name$11" />
				<label for="cmbEmp_Name_11">Junaid Chaudhary-2487(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_12" type="checkbox" name="cmbEmp_Name$12" />
				<label for="cmbEmp_Name_12">KAMAL MATALIA-17(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_13" type="checkbox" name="cmbEmp_Name$13" />
				<label for="cmbEmp_Name_13">KETAN NALAWADE-2478(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_14" type="checkbox" name="cmbEmp_Name$14" />
				<label for="cmbEmp_Name_14">KRUPA DAVE-349(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_15" type="checkbox" name="cmbEmp_Name$15" />
				<label for="cmbEmp_Name_15">NEHA ARUN KHANNA-2145(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_16" type="checkbox" name="cmbEmp_Name$16" />
				<label for="cmbEmp_Name_16">NILESH GAIKWAD-903(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_17" type="checkbox" name="cmbEmp_Name$17" />
				<label for="cmbEmp_Name_17">PALLAVI KATHAL-2465(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_18" type="checkbox" name="cmbEmp_Name$18" />
				<label for="cmbEmp_Name_18">RAMESH  SANAP-1855(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_19" type="checkbox" name="cmbEmp_Name$19" />
				<label for="cmbEmp_Name_19">SAKINA VIVIAN DSILVA-2392(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_20" type="checkbox" name="cmbEmp_Name$20" />
				<label for="cmbEmp_Name_20">SAMANTHA SAXENA-2442(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_21" type="checkbox" name="cmbEmp_Name$21" />
				<label for="cmbEmp_Name_21">SANGEETA JIJI RANE-314(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_22" type="checkbox" name="cmbEmp_Name$22" />
				<label for="cmbEmp_Name_22">SARVESH SUBHASH CHAUDHARY-2462(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_23" type="checkbox" name="cmbEmp_Name$23" />
				<label for="cmbEmp_Name_23">SAYED SOHAIL JAVED AKHTAR-2014(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_24" type="checkbox" name="cmbEmp_Name$24" />
				<label for="cmbEmp_Name_24">SHALIBHADRA HAKANI-2158(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_25" type="checkbox" name="cmbEmp_Name$25" />
				<label for="cmbEmp_Name_25">SONAL RAVINDRA AMBEDE-2533(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_26" type="checkbox" name="cmbEmp_Name$26" />
				<label for="cmbEmp_Name_26">SRINIVAS VENKANNA SAMUDRALA-2525(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_27" type="checkbox" name="cmbEmp_Name$27" />
				<label for="cmbEmp_Name_27">SUNIL DESAI-2484(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_28" type="checkbox" name="cmbEmp_Name$28" />
				<label for="cmbEmp_Name_28">UMANG DARJI-2239(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_29" type="checkbox" name="cmbEmp_Name$29" />
				<label for="cmbEmp_Name_29">UMESH VASHISTH-1900(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_30" type="checkbox" name="cmbEmp_Name$30" />
				<label for="cmbEmp_Name_30">VISHAL SUBHASH PAWADE-1881(March - 2016)</label>
        </div>
    </div>
</div>
&nbsp&nbsp
<input type="submit" name="btnSubmit" value="Process" id="btnSubmit" />

通知
我确实实现了 @Freak 他的建议，禁用了与用户第一选择不同的所有选项。

另一方面，我还实现了对验证按钮的检查，它将检查用户是否可能检查过不同的月份。以防万一。