Обязательные input в таблицу

30 марта 2021, 14:10

День добрый.

Имеется таблица вида

первые три столбца заполняются циклом из базы данных, столбцы с чекбоксом и инпутом в цикле заполняются отдельно.

По нажатию на кнопку, строки с отмеченным чекбоксом должны записываться в другую базу вне зависимости от того, есть ли текст в инпуте.

Как можно запретить отправку строки, если чекбокс отмечен, а инпут пустой? И возможно ли это?

Обязательный атрибут для инпута делает обязательными все инпуты в таблице, следовательно строки, не отмеченные чекбоксом, тоже выделяются как обязательные.

<table border="1px solid black">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>32</td>
      <td>43</td>
      <td>45</td>
      <td><input name="textstring" type="text"></td>
      <td><input name="check" type="checkbox"></td>
    </tr>
       <tr>
      <td>32</td>
      <td>43</td>
      <td>45</td>
     <td><input name="textstring" type="text"></td>
      <td><input name="check" type="checkbox"></td>
    </tr>
       <tr>
      <td>32</td>
      <td>43</td>
      <td>45</td>
      <td><input name="textstring" type="text"></td>
      <td><input name="check" type="checkbox"></td>
    </tr>
  </tbody>
</table>

<input type="button" name="act" value="Актуально">
<input type="button" name="nonact" value="Не актуально">

Answer 1

Так как у вас стоит тег Jquery — пример запрета установки checkbox:

$('input[type="checkbox"]').on('click', function() { 
  let di = $(this).attr('data-input'); 
  let val = $(`.td-input_${di}`).val(); 
  if (val.length === 0 ){ 
    $(this).prop('checked', false); 
    // Активирует кнопку если заполнен комментарий 
    $('input[type="submit"]').prop('disabled', true); 
  } else { 
    $('input[type="submit"]').prop('disabled', false); 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<table> 
  <tr> 
    <td>#</td> 
    <td>Col 2</td> 
    <td>Col 3</td> 
  </tr> 
  <tr> 
    <td>1</td> 
    <td><input type="text" class="td-input_1"></td> 
    <td><input type="checkbox" class="td-input-cb" data-input="1"></td> 
  </tr> 
  <tr> 
    <td>2</td> 
    <td><input type="text" class="td-input_2"></td> 
    <td><input type="checkbox" class="td-input-cb" data-input="2"></td> 
  </tr> 
</table> 
<input type="submit" value="Изменить">

По аналогии можно проверять и перед отправкой на сервер.