选中两个输入各自的行复选框后，如何启用和禁用两个输入

Question

在选中两个同级复选框时如何启用两个输入框，而在未选中同级复选框时如何禁用两个输入框。

选中复选框后，更新或修改的行值应存储在这三个变量values[]-数据库ID（不可更改）comp[]中，以存储组件值{{1 }}-存储计划。取消选中时，应弹出存储的3个值。

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>