简体   繁体   中英

By clicking one checkbox other checkbox should be disable

I've 2 columns with checkboxes when one column is checked all respective are checked likewise in 2nd column but the problem is here, client wants when One column of checkbox is checked then 2nd column will be disable or throw alert message to check only one column at a time?

function SelectAll1(headerchk, gridId) {

        var gvcheck = document.getElementById(gridId);
        var i, j;
        if (headerchk.checked) {
            for (i = 0; i < gvcheck.rows.length - 1; i++) {
                var inputs = gvcheck.rows[i].getElementsByTagName('input');
               for (j = 1; j < inputs.length; j++) {
                 if (inputs[j].type == "checkbox") {
                        inputs[j].checked = true;
                    }
                }
            }
        }
        else {
            for (i = 0; i < gvcheck.rows.length - 1; i++) {
                var inputs = gvcheck.rows[i].getElementsByTagName('input');
                 for (j = 1; j < inputs.length; j++) {
                   if (inputs[j].type == "checkbox") {
                        inputs[j].checked = false;
                    }
                }
            }
        }
    }

You can ch

I don't really know what you're trying to do without the HTML but here's a start you can build off.

 var selected = $('.check:checked').length; if (selected >= 1) { $('.check').prop('disabled', true); } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="check" checked="checked"> <input type="checkbox" class="check"> <input type="checkbox" class="check"> 

From the little info given I assume this:

SelectAll1 clear or set all checkboxes in column 1.
SelectAll2 clear or set all checkboxes in column 2.
headerchk is a checkbox when clicked clears or sets all.

Do this change:

  1. After each line in the code where SelectAll1( headerchk , gridId ) is called you change it to SelectAll1( headerchk .checked , gridId ) .

  2. Insert another line below this line with a negation: SelectAll2(! headerchk . checked , gridId )

  3. After each line in the code where SelectAll2( headerchk , gridId ) is called you change it to SelectAll2( headerchk .checked , gridId ) .

  4. Insert another line below this line with a negation: SelectAll1(! headerchk .checked , gridId )

You only showed me the code for SelectAll1 , so I assume SelectAll2 is the same when you not yet know how to make them different. Correct me if this is not the fact!

  1. Continue by change the function SelectAll1 to the following:

function SelectAll1(header_checked, gridId) {
    var gvcheck = document.getElementById(gridId);
    var i, j;
    for (i = 0; i < gvcheck.rows.length - 1; i++) {
        var inputs = gvcheck.rows[i].getElementsByTagName('input');
        for (j = 1; j < inputs.length; j++) {
            if (inputs[j].type == "checkbox") {
                inputs[j].checked = header_checked;
            }
        }
    }
}

The else-part and if is eliminated by moving the condition to the assignment that is eiher true or false. The .checked part is moved outside the function.


  1. Do the same change in SelectAll2

  2. Test if it works and report to me!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM