troubleshooting Question

JavaScript Sort Ordering and Choice Limiting

Avatar of maaknplan
maaknplanFlag for South Africa asked on
JavaScriptjQuery
5 Comments1 Solution148 ViewsLast Modified:
Hi

I have a simple form where the user can make up to three selections. The user can select the checkboxes in any order, but as they click on each one, the order in which they were checked is remembered, and the position is set to either 1, 2 or 3 when the checkbox is checked, or 0 if the checkbox is unchecked.

The catch is that if a user selects 3 checkboxes, but then unselects the checkbox in position 2, position 3 needs to become 2, so the order is 1,2 and not 1,3.

Example in w3schools

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        function IsChecked(chk) {

            if (TotalChecked() > 3) {
                alert('Only 3 boxes can be checked!');
                $(chk).prop("checked", false);
                return;
            }

            SetPosition();
        }

        function TotalChecked() {
            var total = 0;
            $(".chk").each(function () {
                if ($(this).prop("checked")) {
                    total++;
                }
            });

            return total;
        }

        function SetPosition() {
            var items = [];

            //Get the items and their values first
            $(".position").each(function () {
                var id = $(this).attr('id');
                var val = $(this).val();
                var item = { id: id, value: val };
                var chk = $("#" + id.replace("p", "c"));
                if ($(chk).prop("checked")) {
                    items.push(item);
                }
            });

            //Sort items

            items.sort(function (a, b) {
                return a.value - b.value;
            });

            $(".position").each(function () {
                var id = $(this).attr('id');
                var chk = $("#" + id.replace("p", "c"));
                var len = items.length;



                if ($(chk).prop("checked")) {
                    var val = $(this).val();

                    if (len == 0) {
                        if (val == 0) { val++ };
                    }
                    else if (len == 1) {
                        items[0].value = 1;
                    }
                    else if (len == 2) {
                        items[0].value = 2;
                        items[1].value = 1;
                    }
                    else {
                        items[0].value = 3;
                        items[1].value = 2;
                        items[2].value = 1;
                    }
                }
                else {
                    $(this).val(0);
                }
            });

            var i;
            for (i = 0; i < items.length; i++) {
                $("#" + items[i].id).val(items[i].value);
            }

        }
    </script>
</head>
<body>

    <input id="c1" onchange="IsChecked(this)" class="chk" type="checkbox" />
    <input id="p1" class="form-control position" type="text" value="0" /><br />
    <input id="c2" onchange="IsChecked(this)" class="chk" type="checkbox" />
    <input id="p2" class="form-control position" value="0" /><br />
    <input id="c3" onchange="IsChecked(this)" class="chk" type="checkbox" />
    <input id="p3" class="form-control position" value="0" /><br />
    <input id="c4" onchange="IsChecked(this)" class="chk" type="checkbox" />
    <input id="p4" class="form-control position" value="0" /><br />
    <hr />
    <p id="message"></p>
</body>
</html>

I just can't seem to get this to work, any help is much appreciated.

Thanks.
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros