Question

我正在尝试在内部没有行时禁用该复选框。

我尝试使用复选框：禁用...但无关紧要。

 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;
         }
     }
 }

希望你们能帮助我！

Here is the fiddle

Answer 1

在删除功能中更改此内容：

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

要：

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

并将其添加到您的添加功能：

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

完整代码：

＆＃13;

 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;
         }
     }
 }

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这样的事情应该有效：

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

您可以通过查找父元素来进一步细分您的选择：

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

然后JS看起来像这样

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

希望有所帮助。

当页面上没有复选框时禁用复选框

2 个答案: