Проверьте несколько текстовых полей в зависимости от флажка JS

Question

У меня есть несколько флажков с тем же атрибутом имени myTask и несколько текстовых полей с именем myWeight

значение myTask ($field->taskCode) исходит из дБ.

и значение текстового поля myWeight равно none.

Вот его код. PHP / Laravel

 @if(count($task_record))
 @foreach($task_record as $field)
 <div class="current-tl row">
     <div class="col-md-3">
          <div class="custom-control custom-checkbox">
               <input type="checkbox" class="custom-control-input myTask" name="myTask" value="{{$field->taskCode}}" id="myTask{{$field->taskCode}}">
                   <label class="custom-control-label" for="myTask{{$field->taskCode}}">{{$field->task_title}}</label>
                   </div>
                 </div>
                 <div class="col-md-4">
                 <div class="md-form svs-md-form">
                 <input type="number" placeholder="Task Weight" id="myWeight{{$field->taskCode}}" data-tcode = "{{$field->taskCode}}" name="myWeight" class="form-control">
               </div>
             </div>
         </div>
        @endforeach
   @else
   <label>No record found..</label>
   @endif

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

вот текущий вывод

вот мой текущий код для получения текущего значения флажка и текстовых полей jQuery

var taskData = []; 
$("input:checkbox[name=myTask]:checked").each(function() { 
    taskData.push($(this).val()); 
}); 


var dataWeight = []; 
$('input[name="myWeight"]').each(function() {
    if($(this).val() != ''){
        dataWeight.push($(this).val());
    }
});

Возможно ли это с помощью JavaScript?

Answer 1

Я думаю, что вы должны создать функцию проверки / проверки, которая будет запускаться при загрузке вашей страницы, а затем привязываться к каждому флажку задачи. Поскольку у вас, кажется, есть правильные идентификаторы везде от вашего бэкэнда, вы можете положиться на них в качестве своих идентификаторов и селекторов.

var check = function ($checkbox) {
  $('#myWeight'+$checkbox.val()).prop('disabled', !$checkbox.is(':checked'));
};

$('input[type=checkbox]').each(function () {
  check($(this));
  
  $(this).on('change', function () {
    check($(this));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="current-tl row">
     <div class="col-md-3">
          <div class="custom-control custom-checkbox">
               <input type="checkbox" class="custom-control-input myTask" name="myTask" value="42" id="myTask42">
                   <label class="custom-control-label" for="myTask42">Task 42</label>
                   </div>
                 </div>
                 <div class="col-md-4">
                 <div class="md-form svs-md-form">
                 <input type="number" placeholder="Task Weight" id="myWeight42" data-tcode = "42" name="myWeight" class="form-control">
               </div>
             </div>
         </div>
         <div class="current-tl row">
     <div class="col-md-3">
          <div class="custom-control custom-checkbox">
               <input type="checkbox" class="custom-control-input myTask" name="myTask" value="43" id="myTask43">
                   <label class="custom-control-label" for="myTask43">Task 43</label>
                   </div>
                 </div>
                 <div class="col-md-4">
                 <div class="md-form svs-md-form">
                 <input type="number" placeholder="Task Weight" id="myWeight43" data-tcode = "43" name="myWeight" class="form-control">
               </div>
             </div>
         </div>

Answer 2

Примерно так должно работать (не проверено):

$('.myTask').change(function() {
    var weightId = this.attr('id').replace('myTask', 'myWeight');
    $(`#${weightId}`).disabled = !this.checked;
})

• Получить массив элементов с классом myTask
• Добавить прослушиватель событий, когда флажокпереключается
• Возьмите элемент input и отключите его, если флажок не установлен (или наоборот)