jQuery Mobile 1.4 - Days of the week

MULTIPLE SELECT with select all option

by katalin_2003

HTML

<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <select class="userInput" name="selectDays" id="selectDays" multiple="multiple" data-native-menu="false">
            <option val="placeholder" data-placeholder="true">Days of the week</option>
            <option value="">Select All</option>
            <option value="Mon">Monday</option>
            <option value="Tue">Tuesday</option>
            <option value="Wed">Wednesday</option>
            <option value="Thu">Thursday</option>
            <option value="Fri">Friday</option>
            <option value="Sat">Saturday</option>
            <option value="Sun">Sunday</option>
        </select>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
         <h1>My page footer</h1>

    </div>
</div>

JavaScript

var IsSelectAllOperation = false;
    $(document).on("click", "#selectDays-menu li a", function () {
        //was select all clicked (data-option-index="1")
        var idx = $(this).closest("li").data("option-index");
        if (idx == '1') {
            var IsChecked = $(this).hasClass("ui-checkbox-on");
            if (IsChecked) {
                //select all
                IsSelectAllOperation = true;
                $("#selectDays-menu li a").each(function (index) {
                    var IsHidden = $(this).closest("li").hasClass("ui-screen-hidden");
                    var NotChecked = $(this).hasClass("ui-checkbox-off");
                    if (!IsHidden && NotChecked) {
                        $(this).click();
                    }
                });
                IsSelectAllOperation = false;
            }
        } else {
            //uncheck the select all option
            if (!IsSelectAllOperation) {
                var $selall = $('#selectDays-menu li[data-option-index="1"] a');
                if ($selall.hasClass("ui-checkbox-on")) {
                    $selall.click();
                }
            }
        }
    });