Disable checkbox when no checkboxes on page

Question

I'm trying to disable the checkbox when there are no rows inside.

I tried something with checkbox: disable... but doesn't matter.

 function addRow(tableID) {
     var table = document.getElementById(tableID);
     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);
     var cell1 = row.insertCell(0);
     var element1 = document.createElement("input");
     element1.type = "checkbox";
     element1.name = "chkbox[]";
     cell1.appendChild(element1);
     var cell2 = row.insertCell(1);
     cell2.innerHTML = rowCount;
     var cell3 = row.insertCell(2);
     cell3.innerHTML = rowCount;
     var cell4 = row.insertCell(3);
     cell4.innerHTML = rowCount;
     var cell5 = row.insertCell(4);
     cell5.innerHTML = rowCount;
     var cell6 = row.insertCell(5);
     cell6.innerHTML = rowCount;
 }

 function deleteRow(tableID) {
   var table = document.getElementById(tableID);
   var rowCount = table.rows.length;

   for (var i = 1; i < rowCount; i++) {
     var row = table.rows[i];
     var chkbox = row.cells[0].children[0];
     if (chkbox != null && chkbox.checked == true) {
       table.deleteRow(i);
       rowCount--;
       i--;
     }
   }
   var rootChkbox = table.rows[0].cells[0].children[0];
   if (rowCount == 1) rootChkbox.checked = false;
 }

 function checkAll() {
     var checkboxes = document.getElementsByTagName('input');
   var val = null;
     for (var i = 0; i < checkboxes.length; i++) {
         if (checkboxes[i].type == 'checkbox') {
             if (val === null) val = checkboxes[i].checked;
             checkboxes[i].checked = val;
         }
     }
 }

Hope you guys can help me!

Here is the fiddle

Answer 1

Change this in your delete function:

if (rowCount == 1) rootChkbox.checked = false;

To:

if (rowCount == 1)
{
    rootChkbox.checked = false;
    rootChkbox.disabled = true;
}

And add this to your add Function:

if (rowCount == 1)
{
    rootChkbox.disabled = false;
}

Full Code:

 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name = "chkbox[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = rowCount; var cell3 = row.insertCell(2); cell3.innerHTML = rowCount; var cell4 = row.insertCell(3); cell4.innerHTML = rowCount; var cell5 = row.insertCell(4); cell5.innerHTML = rowCount; var cell6 = row.insertCell(5); cell6.innerHTML = rowCount; var rootChkbox = table.rows[0].cells[0].children[0]; if (rowCount == 1) { rootChkbox.disabled = false; } } function deleteRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 1; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].children[0]; if (chkbox != null && chkbox.checked == true) { table.deleteRow(i); rowCount--; i--; } } var rootChkbox = table.rows[0].cells[0].children[0]; if (rowCount == 1) { rootChkbox.checked = false; rootChkbox.disabled = true; } } function checkAll() { var checkboxes = document.getElementsByTagName('input'); var val = null; for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { if (val === null) val = checkboxes[i].checked; checkboxes[i].checked = val; } } }

 body { font: 14px/18px Arial; padding: 30px 20px; background: gray; } table#dataTable { margin-top: 10px; color: white; }

 <body> <input type="button" value="Add Row" onclick="addRow('dataTable')" /> <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> <table id="dataTable" cellPadding="5" cellSpacing="0" border="1" rules="all"> <tr> <th> <input type="checkbox" onchange="checkAll()" name="chk[]" disabled="disabled"/> </th> <th>Make</th> <th>Model</th> <th>Description</th> <th>Start Year</th> <th>End Year</th> </tr> </table> </body>

Answer 2

Something like this should work:

var checkboxes = document.querySelectorAll("input[type=checkbox]");
if(checkboxes.length == 1) { checkboxes[0].setAttribute('disabled','disabled');}

You can further segment your selection by looking for a parent element:

<div id="group1"><input type="checkbox" /></div>
<div id="group2"><input type="checkbox" /></div>

Then the JS would look like this

var checkboxes = document.querySelectorAll("#group1 input[type=checkbox]");

Hope that helps.

Disable checkbox when no checkboxes on page

Question

2 answers

solution1
0 ACCPTED 2016-10-12 17:46:32

solution2
0 2016-10-12 17:54:23

Disable checkbox when no checkboxes on page

Question

2 answers

solution1 0 ACCPTED 2016-10-12 17:46:32

solution2 0 2016-10-12 17:54:23

solution1
0 ACCPTED 2016-10-12 17:46:32

solution2
0 2016-10-12 17:54:23