Question

I’m working on a project and made a grid on admin side in which all projects are shown so that when admin click on three projects they should be shown on index page of that site and makes other check boxes disable after selecting three projects and when to change it remove one of selected check box and then give selection to others.what I did is got a java script code from stack overflow.Now this code is working but problem is that when i refresh page or navigate from other menu more check boxes could be selected even it shows the previous three selected projects on index page.how can i make it to not select after page refresh. here is code

function disableHandler (form, inputName) {
    var inputs = form.elements[inputName];
    for (var i = 2; i < inputs.length; i++) {
        var input = inputs[i];
        input.onclick = function (evt) {
            if (this.checked) {
                disableInputs(this, inputs);
            }
            else {
                enableInputs(this, inputs);
            }
            return true;
        };
    }
}

function disableInputs (input, inputs) {
    for (var i = 2; i < inputs.length; i++) {
        var currentInput = inputs[i];
        if (currentInput != input) {
            currentInput.disabled = true;
        }
    }
}

function enableInputs (input, inputs) {
    for (var i = 2; i < inputs.length; i++) {
        var currentInput = inputs[i];
        if (currentInput != input) {
            currentInput.disabled = false;
        }
    }
}

Answer 1

You should persist selection in a database. Here’s a to-do list:

1. After each selection/deselection, send a background ajax request to the server, with details of selected checkbox(es).

2. On the server save this information to the database.

3. When user refreshes page, use information from the database to render checked checkboxes as checked, and others as disabled.