2016-10-12 28 views
-2

内部に行がない場合、チェックボックスを無効にしようとしています。ページのチェックボックスがオフの場合、チェックボックスを無効にする

私はチェックボックスで何か試した:無効...しかし、問題ではない。

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

+0

ここにコードを記入してください。 – brso05

+1

[ask]を読んで、サードパーティのサイトではなく質問自体に[mcve]を含めてください。 –

+0

@HenkErtjeチェックボックスを無効にしようとしている場所が表示されません... – brso05

答えて

0

変更これを:

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

へ:

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

そして、あなたのアドオン機能にこれを追加します。

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

全コード:

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]; 
 
\t if (rowCount == 1) 
 
    { 
 
     rootChkbox.disabled = false; 
 
    } 
 
} 
 

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

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

 
function checkAll() { 
 
    var checkboxes = document.getElementsByTagName('input'); 
 
\t 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; 
 
\t padding: 30px 20px; 
 
\t background: gray; 
 
} 
 

 
table#dataTable { 
 
    margin-top: 10px; 
 
\t 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>

+0

これは私のおかげで助けた@ brs05 –

+0

問題はありません!お役に立てて嬉しいです!これがあなたの問題を解決したら、答えを受け入れてupvoteしてください。このために – brso05

0

このような何かが動作するはずです:

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> 

次に、t彼はJSはこのようになります

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

希望に役立つ希望。

+0

よろしいですか;) –

関連する問題