Dropdownchecboxes selected value validation in javascript

Question

I have a DropDownCheckBoxes where I can CHECK multiple items from the list. Now what I want is,

A validation on button click for multiple Items selected

Answer 1

So I took a look at your code. And since I didn't know it you wanted it in plain Javascript or jQuery, I took the liberty of doing it in jQuery (since it's easier).

Also I don't know the true purpose of your code, so I based it upon your example and the information you gave us. This might give you an idea on how to complete your task.

Either run the snippet below or take a look at this 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();
}

    

	Select ↓↑
    
    

        

				
				--Select--

				
				
				ANIL VITTHAL GAWADE-312(April - 2016)

				
				
				ANURADHA A. DESHMUKH-53(April - 2016)

				
				
				ASMA SIDDIQUI-83(April - 2016)

				
				
				DEEPTI MAITHIL-1250(April - 2016)

				
				
				GAURAV JHUNJHUNWALA-2222(March - 2016)

				
				
				HITESH PANCHAL-253(April - 2016)

				
				
				JAGDISH UBARE-362(April - 2016)

				
				
				JAIDEEP MAHAKAL-134(April - 2016)

				
				
				JASMINE RATHOD-228(April - 2016)

				
				
				JIGAR SHAH-358(April - 2016)

				
				
				Junaid Chaudhary-2487(April - 2016)

				
				
				KAMAL MATALIA-17(April - 2016)

				
				
				KETAN NALAWADE-2478(April - 2016)

				
				
				KRUPA DAVE-349(April - 2016)

				
				
				NEHA ARUN KHANNA-2145(March - 2016)

				
				
				NILESH GAIKWAD-903(March - 2016)

				
				
				PALLAVI KATHAL-2465(April - 2016)

				
				
				RAMESH  SANAP-1855(March - 2016)

				
				
				SAKINA VIVIAN DSILVA-2392(April - 2016)

				
				
				SAMANTHA SAXENA-2442(April - 2016)

				
				
				SANGEETA JIJI RANE-314(April - 2016)

				
				
				SARVESH SUBHASH CHAUDHARY-2462(March - 2016)

				
				
				SAYED SOHAIL JAVED AKHTAR-2014(April - 2016)

				
				
				SHALIBHADRA HAKANI-2158(April - 2016)

				
				
				SONAL RAVINDRA AMBEDE-2533(March - 2016)

				
				
				SRINIVAS VENKANNA SAMUDRALA-2525(March - 2016)

				
				
				SUNIL DESAI-2484(March - 2016)

				
				
				UMANG DARJI-2239(March - 2016)

				
				
				UMESH VASHISTH-1900(March - 2016)

				
				
				VISHAL SUBHASH PAWADE-1881(March - 2016)
        
    

  

Notice
I did implement @Freak his suggestion, by disabling all the options different from the user his first choice.

On the other hand, I also implemented the check on the Validate button, where as it will check if the user may or may not have checked a different month. Just in case.