如何使用復選框僅選擇表格中的一行

Question

我有一個包含 x 行數和 4 列的表格，一列是復選框，其他三列是只讀選擇框。 我希望用戶通過選中第一列中的復選框來選擇僅 1 行可編輯，然后如果他選中另一行中的另一個復選框，則他之前選中的復選框將取消選中，行再次變為只讀。

所以我希望用戶只選擇 1 行進行編輯，其他人是只讀的。 這是我的代碼，但它不起作用。

 $(document).ready(function(){ $('.col1, .col2, .col3').attr('disabled', true) selectRow(); $('.tbl').on('change', '.selectRow', selectRow); function selectRow() { $('.tbl tbody tr').each(function () { $(this).find('.selectRow').each(function () { var checkedRow = $(this).closest('tr').find('input:checkbox:checked'), col1 = $(this).closest('tr').find('.col1'), col2 = $(this).closest('tr').find('.col2'), col3 = $(this).closest('tr').find('col3'); if (checkedRow){ $('.col1, .col2, .col3').removeAttr('disabled') checkedRow.siblings().prop('checked', false); }else{ $('.col1, .col2, .col3').attr('disabled', true) checkedRow.siblings().prop('checked', false); } }); }); } });

 <table class="tbl"> <tr> <td><input type="checkbox" name="check1" class = "selectRow" />&nbsp;</td> <td> <select class="col1"> <option id="col1o1">A</option> <option id="col1o2">B</option> <option id="col1o3">C</option> <option id="col1o4">E</option> </select> </td> <td> <select class="col2"> <option id="col2o1">A</option> <option id="col2o2">B</option> <option id="col2o3">C</option> <option id="col2o4">E</option> </select> </td> <td> <select class="col3"> <option id="col3o1">A</option> <option id="col3o2">B</option> <option id="col3o3">C</option> <option id="col3o4">E</option> </select> </td> </tr> <br> <tr> <td><input type="checkbox" name="check1" />&nbsp;</td> <td> <select class="s1"> <option id="s1o1">A</option> <option id="o2">B</option> <option id="o3">C</option> <option id="o4">E</option> </select> </td> <td> <select class="s2"> <option id="s2o1">A</option> <option id="s2o2">B</option> <option id="s2o3">C</option> <option id="s2o4">E</option> </select> </td> <td> <select class="s3"> <option id="s3o1">A</option> <option id="s3o2">B</option> <option id="s3o3">C</option> <option id="s3o4">E</option> </select> </td> </tr> <br> <tr> <td><input type="checkbox" name="check1" />&nbsp;</td> <td> <select class="s1"> <option id="s1o1">A</option> <option id="o2">B</option> <option id="o3">C</option> <option id="o4">E</option> </select> </td> <td> <select class="s2"> <option id="s2o1">A</option> <option id="s2o2">B</option> <option id="s2o3">C</option> <option id="s2o4">E</option> </select> </td> <td> <select class="s3"> <option id="s3o1">A</option> <option id="s3o2">B</option> <option id="s3o3">C</option> <option id="s3o4">E</option> </select> </td> </tr> </table>

這是我的代碼：

Answer 1

如果沒有 jQuery和使用事件委托，事情可能會更簡單一些：

 document.addEventListener(`click`, handle); // disable all selectors initially document.querySelectorAll(`td select`) .forEach(s => s.setAttribute(`disabled`, true)); function handle(evt) { // only do something if a checkbox was clicked if (evt.target.type === `checkbox`) { const isChecked = evt.target.checked; const selectedRow = evt.target.closest(`tr`); // reset checkboxes, row coloring and disabled state document.querySelectorAll(`input[type='checkbox']`) .forEach(cb => { cb.checked = cb !== evt.target ? false : isChecked; const row = cb.closest(`tr`); row.classList[isChecked && row === selectedRow ? `add` : `remove`](`selected`); [...row.querySelectorAll(`select`)].filter(r => r !== selectedRow) .forEach(s => s.setAttribute(`disabled`, true)); selectedRow.querySelectorAll(`select`) .forEach(s => s[isChecked ? `removeAttribute` : `setAttribute`](`disabled`, true)); }); } }

 body { margin: 2rem; } tr.selected { background-color: lightgreen; }

 <table class="tbl"> <tr> <td><input type="checkbox" name="check1" class="selectRow" />&nbsp;</td> <td> <select class="col1"> <option id="col1o1">A</option> <option id="col1o2">B</option> <option id="col1o3">C</option> <option id="col1o4">E</option> </select> </td> <td> <select class="col2"> <option id="col2o1">A</option> <option id="col2o2">B</option> <option id="col2o3">C</option> <option id="col2o4">E</option> </select> </td> <td> <select class="col3"> <option id="col3o1">A</option> <option id="col3o2">B</option> <option id="col3o3">C</option> <option id="col3o4">E</option> </select> </td> </tr> <br> <tr> <td><input type="checkbox" name="check1" />&nbsp;</td> <td> <select class="s1"> <option id="s1o1">A</option> <option id="o2">B</option> <option id="o3">C</option> <option id="o4">E</option> </select> </td> <td> <select class="s2"> <option id="s2o1">A</option> <option id="s2o2">B</option> <option id="s2o3">C</option> <option id="s2o4">E</option> </select> </td> <td> <select class="s3"> <option id="s3o1">A</option> <option id="s3o2">B</option> <option id="s3o3">C</option> <option id="s3o4">E</option> </select> </td> </tr> <br> <tr> <td><input type="checkbox" name="check1" />&nbsp;</td> <td> <select class="s1"> <option id="s1o1">A</option> <option id="o2">B</option> <option id="o3">C</option> <option id="o4">E</option> </select> </td> <td> <select class="s2"> <option id="s2o1">A</option> <option id="s2o2">B</option> <option id="s2o3">C</option> <option id="s2o4">E</option> </select> </td> <td> <select class="s3"> <option id="s3o1">A</option> <option id="s3o2">B</option> <option id="s3o3">C</option> <option id="s3o4">E</option> </select> </td> </tr> </table>

這是一個更簡化的版本，作用於表格行

 document.addEventListener(`click`, handle); // create the table dynamically to keep demo lean createTable(); function handle(evt) { if (evt.target.type === `checkbox`) { const selectedRow = evt.target.closest(`tr`); document.querySelectorAll(`tr`) .forEach( row => { // not selected if (row !== selectedRow) { row.querySelector(`[type=checkbox]`).checked = false; row.classList.remove(`selected`); return row.querySelectorAll(`select`) .forEach(s => s.setAttribute(`disabled`, true)); } // selected row.classList[[`remove`, `add`][+evt.target.checked]](`selected`); row.querySelectorAll(`select`).forEach(s => s[`${[`set`,`remove`][+evt.target.checked]}Attribute`](`disabled`, true)); }); } } function createTable() { const table = document.createElement(`table`); const repeat = (str, n) => Array(n + 1).join(str); const select = `<td><select> <option>A</option> <option>B</option> <option>C</option> <option>E</option></select></td>`; const row = `<tr> <td><input type="checkbox" /></td> ${repeat(select, 3)}</tr>`; table.insertAdjacentHTML(`beforeend`, repeat(row, 3)); document.body.appendChild(table); // disable all selectors initially document.querySelectorAll(`td select`) .forEach(s => s.setAttribute(`disabled`, true)); }

 body { margin: 2rem; } tr.selected { background-color: lightgreen; } tr td:nth-child(1) { padding-right: 6px; }

Answer 2

問題是因為checkedRow包含一個 jQuery 對象。 當您在if條件中使用它時，它將始終等於true 。 相反，您需要從該元素獲取已checked屬性，並在條件中使用它。

另請注意，通過使用通用選擇器而不是增量選擇器，可以使邏輯更加簡潔和可擴展。 此外，您應該考慮將disabled屬性直接添加到 HTML 中。 通過 JS 添加它意味着會有一個可見的 flash，其中元素被加載為啟用，然后當 DOM 加載時它將被禁用，這對您的用戶體驗不利。

 jQuery($ => { selectRow(); $('.tbl').on('change', '.selectRow', selectRow); function selectRow() { $('.tbl tbody tr').each(function() { let $row = $(this); let $checkbox = $row.find('.selectRow'); $row.find('select').prop('disabled', !$checkbox.prop('checked')); }); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tbl"> <tr> <td><input type="checkbox" name="check1" class="selectRow" />&nbsp;</td> <td> <select class="col1" disabled="disabled"> <option id="col1o1">A</option> <option id="col1o2">B</option> <option id="col1o3">C</option> <option id="col1o4">E</option> </select> </td> <td> <select class="col2" disabled="disabled"> <option id="col2o1">A</option> <option id="col2o2">B</option> <option id="col2o3">C</option> <option id="col2o4">E</option> </select> </td> <td> <select class="col3" disabled="disabled"> <option id="col3o1">A</option> <option id="col3o2">B</option> <option id="col3o3">C</option> <option id="col3o4">E</option> </select> </td> </tr> <br> <tr> <td><input type="checkbox" name="check1" class="selectRow" />&nbsp;</td> <td> <select class="s1"> <option id="s1o1">A</option> <option id="o2">B</option> <option id="o3">C</option> <option id="o4">E</option> </select> </td> <td> <select class="s2"> <option id="s2o1">A</option> <option id="s2o2">B</option> <option id="s2o3">C</option> <option id="s2o4">E</option> </select> </td> <td> <select class="s3"> <option id="s3o1">A</option> <option id="s3o2">B</option> <option id="s3o3">C</option> <option id="s3o4">E</option> </select> </td> </tr> <br> <tr> <td><input type="checkbox" name="check1" class="selectRow" />&nbsp;</td> <td> <select class="s1"> <option id="s1o1">A</option> <option id="o2">B</option> <option id="o3">C</option> <option id="o4">E</option> </select> </td> <td> <select class="s2"> <option id="s2o1">A</option> <option id="s2o2">B</option> <option id="s2o3">C</option> <option id="s2o4">E</option> </select> </td> <td> <select class="s3"> <option id="s3o1">A</option> <option id="s3o2">B</option> <option id="s3o3">C</option> <option id="s3o4">E</option> </select> </td> </tr> </table>

Answer 3

這很好用！ 取消選中除當前焦點之外的所有復選框'.tbl [type="checkbox"]:not(:focus)'然后操作選擇框

 $(document).ready(function(){ $('.tbl [type="checkbox"]').on('click', function() { $('.tbl [type="checkbox"]:not(:focus)').prop('checked', false); $('.tbl select').attr('disabled', true); $(this).parent().parent().find('select').attr('disabled', !$(this).prop('checked')); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tbl"> <tr> <td><input type="checkbox" name="check1" class = "selectRow" />&nbsp;</td> <td> <select class="col1" disabled> <option id="col1o1">A</option> <option id="col1o2">B</option> <option id="col1o3">C</option> <option id="col1o4">E</option> </select> </td> <td> <select class="col2" disabled> <option id="col2o1">A</option> <option id="col2o2">B</option> <option id="col2o3">C</option> <option id="col2o4">E</option> </select> </td> <td> <select class="col3" disabled> <option id="col3o1">A</option> <option id="col3o2">B</option> <option id="col3o3">C</option> <option id="col3o4">E</option> </select> </td> </tr> <br> <tr> <td><input type="checkbox" name="check1" />&nbsp;</td> <td> <select class="s1" disabled> <option id="s1o1">A</option> <option id="o2">B</option> <option id="o3">C</option> <option id="o4">E</option> </select> </td> <td> <select class="s2" disabled> <option id="s2o1">A</option> <option id="s2o2">B</option> <option id="s2o3">C</option> <option id="s2o4">E</option> </select> </td> <td> <select class="s3" disabled> <option id="s3o1">A</option> <option id="s3o2">B</option> <option id="s3o3">C</option> <option id="s3o4">E</option> </select> </td> </tr> <br> <tr> <td><input type="checkbox" name="check1" />&nbsp;</td> <td> <select class="s1" disabled> <option id="s1o1">A</option> <option id="o2">B</option> <option id="o3">C</option> <option id="o4">E</option> </select> </td> <td> <select class="s2" disabled> <option id="s2o1">A</option> <option id="s2o2">B</option> <option id="s2o3">C</option> <option id="s2o4">E</option> </select> </td> <td> <select class="s3" disabled> <option id="s3o1">A</option> <option id="s3o2">B</option> <option id="s3o3">C</option> <option id="s3o4">E</option> </select> </td> </tr> </table>