CODEWITHSUNDEEP
javascriptjquery
user123456789
user123456789

Reputation: 566

restricting user to check checkboxes based on my requirement

This is in addition to previous question

I've got a bunch of checkboxes in a table, I would like to restrict the user to check the checkboxes based on following rules.

  1. If user is clicking any one of the checkbox in a particular row, the we have to make next two checkboxes checked programatically (jquery) and as well as uncheck (toggle).
  2. There will be Block button/checkbox, if user is clicking block button then we have to disable all checkboxes in that row, except already checked.
  3. We have restrict user to check checkbox, if there is no next two checkboxes available(i.e, unchecked). This is rule exception for last checkbox in a row (User can able to check last checkbox in a row).

Here i have managed with 1 and 2 rules, but for third rule i'm not getting any idea.

Jquery

$('.grp:checkbox').change(function () {
    var obj = $(this).parent().nextAll("td").slice(0, 2);
    if ($(this).is(":checked")) {
        //$(this).removeClass('grp');
        obj.find(":checkbox").prop('checked', true);
        obj.find(":checkbox").prop('disabled', true);
    } else {
        obj.find(":checkbox").prop('checked', false);
        obj.find(":checkbox").prop('disabled', false);
    }
});


$('.block').change(function (e) {
    var obj = $(this).parent().nextAll("td");
    if ($(this).is(":checked")) {
        obj.find(":checkbox").prop('checked', true).prop('disabled', true);
    } else {
        obj.find(":checkbox").prop('checked', false).prop('disabled', false);
    }
});

Demo Fiddle

if anyone giving me any suggestions, it may help full for me.

Thanks in advance.

Upvotes: 1

Views: 112

Answers (2)

user123456789
user123456789

Reputation: 566

Finally i got my answer, here i'm posting my answer, it my helpfull to someone.

Jquery

$('.adj :checkbox').change(function () {
    //alert('1');
    var obj = $(this).parent().nextAll("td").slice(0, 2);
    if ($(this).is(":checked") && $(this).hasClass("grp")) {
        //alert('2');
        if (obj.find(".grp:checkbox").hasClass("grp")) {
            var i = $(this).attr("id");
            //alert(i);
            $(this).addClass(i);
            $(this).toggleClass('grp bkd');
            obj.find(".grp:checkbox").prop('checked', true).addClass(i);
            obj.find(".grp:checkbox").prop('disabled', true).toggleClass('grp bkd');
        } else {
            $(this).prop('checked', false);
        }
    } else {
        var id = $(this).attr("id");
        $(this).removeClass(id);
        $(this).toggleClass('grp bkd');
        obj.find("." + id + ":checkbox").prop('checked', false);
        obj.find("." + id + ":checkbox").prop('disabled', false).toggleClass('grp bkd').removeClass(id);
    }
});


$('.block').change(function (e) {
    var obj = $(this).parent().nextAll("td");
    if ($(this).is(":checked")) {
        obj.find(".grp:checkbox").prop('checked', true).prop('disabled', true);
    } else {
        obj.find(".grp:checkbox").prop('checked', false).prop('disabled', false);
    }
});

Working Fiddle

Upvotes: 1

Praveen
Praveen

Reputation: 56509

1) Create an empty array chked.
2) Iterate the obj to check whether it is checked or not using $.each()

$.each(obj, function (i, j) {

    });

3) Push the value returned by each iteration. 

chked.push($(j).find('input')[0].checked);

4) Using $.inArray(), check for any unchecked available

var isAvailable = $.inArray(false, chked);

this returns -1 is any of the 2 checkbox has value true otherwise 0

finally, 

$('.grp:checkbox').change(function () {
    var obj = $(this).parent().nextAll("td").slice(0, 2);
    var chked = [];
    $.each(obj, function (i, j) {
        chked.push($(j).find('input')[0].checked);
    });

    var isAvailable = $.inArray(false, chked);
    console.log(isAvailable);
    if (chked.length != 0 && isAvailable == -1) {
        return false;
    } else {

        if ($(this).is(":checked")) {
            //$(this).removeClass('grp');
            obj.find(":checkbox").prop('checked', true);
            obj.find(":checkbox").prop('disabled', true);
        } else {
            obj.find(":checkbox").prop('checked', false);
            obj.find(":checkbox").prop('disabled', false);
        }
    }
});

JSFiddle

Upvotes: 0

Related Questions