選中兩個輸入各自的行復選框后，如何啟用和禁用兩個輸入

Question

選中兩個同級復選框時如何啟用兩個輸入框，而取消選中同級復選框時如何禁用它們。

選中復選框后，更新或修改的行值應存儲在這三個變量中values[] -db id（不可更改）， comp[] -用於存儲組件值， plans[] -用於存儲計划。 取消選中時，應彈出存儲的3個值。

<tbody>
  <tr class="checkRowedit">
    <td><label>220</label></td>
    <td><input name="component" type="text" value="John"></td>
    <td><input name="plans" type="text" value="9980"></td>
    <td><input type="checkbox" value="220"></td>
  </tr>
  <tr class="checkRowedit">
    <td><label>330</label></td>
    <td><input name="component" type="text" value="Shan"></td>
    <td><input name="plans" type="text" value="966"></td>
    <td>
      <input type="checkbox" value="330">
    </td>
  </tr>
  <tr class="checkRowedit">
    <td><label>440</label></td>
    <td><input name="component" type="text" value="Irfan"></td>
    <td><input name="plans" type="text" value="953"></td>
    <td>
      <input type="checkbox" value="440">
    </td>
  </tr>
  <tr class="checkRowedit">
    <td><label>550</label></td>
    <td><input name="component" type="text" value="Khalid"></td>
    <td><input name="plans" type="text" value="897"></td>
    <td>
      <input type="checkbox" value="550">
    </td>
  </tr>
</tbody>

var values = []; 
var comp = []; 
var plans = [];

Answer 1

這是兩個以上的問題，但是在選中復選框后，您將要使用filter ， map和reduce來構建數組。

要啟用/禁用您的框，您將使用querySelectorAll查找checkboxes以向其中添加事件。 選中它們后，您將禁用該字段並構建陣列。

 var values = []; var comp = []; var plans = []; Array.from(document.querySelectorAll('[type=checkbox]')).forEach(checkbox => { checkbox.addEventListener('change', e => { Array.from(checkbox.closest('tr').querySelectorAll('[type=text]')) .forEach(i => i.disabled = !checkbox.checked) // Build the arrays comp = getComponents() plans = getPlans() values = getValues() // requires previous two to be set // Test our logic console.log('Values: ' + values.toString()) console.log('Comps: ' + comp.toString()) console.log('Plans: ' + plans.toString()) }) }) function getComponents() { return Array.from(document.querySelectorAll('[name=component]')) .filter(item => !item.closest('tr').querySelector('[type=checkbox]').checked) .map(item => item.value) } function getPlans() { return Array.from(document.querySelectorAll('[name=plans]')) .filter(item => !item.closest('tr').querySelector('[type=checkbox]').checked) .map(item => item.value) } function getValues() { return comp.reduce((arr, item, idx) => arr.concat([item, plans[idx]]), []) } 

 <table> <tbody> <tr class="checkRowedit"> <td><label>220</label></td> <td><input name="component" type="text" value="John"></td> <td><input name="plans" type="text" value="9980"></td> <td><input type="checkbox" value="220" checked="checked"></td> </tr> <tr class="checkRowedit"> <td><label>330</label></td> <td><input name="component" type="text" value="Shan"></td> <td><input name="plans" type="text" value="966"></td> <td><input type="checkbox" value="330" checked="checked"></td> </tr> <tr class="checkRowedit"> <td><label>440</label></td> <td><input name="component" type="text" value="Irfan"></td> <td><input name="plans" type="text" value="953"></td> <td><input type="checkbox" value="440" checked="checked"></td> </tr> <tr class="checkRowedit"> <td><label>550</label></td> <td><input name="component" type="text" value="Khalid"></td> <td><input name="plans" type="text" value="897"></td> <td><input type="checkbox" value="550" checked="checked"></td> </tr> </tbody> </table>