Как включить и отключить два входа, когда установлен соответствующий флажок

Question

Как включить два поля ввода, когда установлены флажки их родных, и отключить их, если флажки их родных элементов не установлены.

Когда флажок установлен, обновленные или измененные значения строк должны храниться в этих трех переменных values[] - идентификатор базы данных (не изменяется), 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 и limit для построения ваших массивов после того, как флажок установлен.

Чтобы включить / отключить ваши ящики, вы будете использовать 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>