Соотношение между двумя html-полями

Question

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

Теперь у меня их много, и с ними сложно справляться с событиями проверки каждого из них, поэтому я создал событие onclick для прослушивания события проверки класса.

<table> 
    <tr> 
    <td> 
     <label class="app-form-label"> 
     <input type="checkbox" name="Sem1CourseOffer" id="chkSem1CourseOffer" class="disableEnableField" value="Semester 1">Semester 1</label> 
    </td> 
    <td> 
     <div style="float:left"> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Face to Face" class="enableDisable1">Face to Face</label> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Print" class="enableDisable1">Print</label> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Blended" class="enableDisable1">Blended</label> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Online" class="enableDisable1">Online</label> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem1CourseOfferMode" disabled="disabled" value="Other" class="enableDisable1">Other</label> 
     </div> 
     <textarea name="Sem1CourseOfferModeComment" id="txtSem1CourseOfferModeComment" disabled="disabled" class="control-label enableDisable1" style="width: 50%; margin-left:20px; height:100%"></textarea> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <label class="app-form-label"> 
     <input type="checkbox" name="Sem2CourseOffer" id="chkSem2CourseOffer" class="disableEnableField" value="Semester 2">Semester 2</label> 
    </td> 
    <td> 
     <div style="float:left"> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Face to Face" class="enableDisable2">Face to Face</label> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Print" class="enableDisable2">Print</label> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Blended" class="enableDisable2">Blended</label> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Online" class="enableDisable2">Online</label> 
     <label style="display:block"> 
      <input type="checkbox" name="Sem2CourseOfferMode" disabled="disabled" value="Other" class="enableDisable2">Other</label> 
     </div> 
     <textarea name="Sem2CourseOfferModeComment" id="txtSem2CourseOfferModeComment" disabled="disabled" class="control-label enableDisable2" style="width: 50%; margin-left:20px; height:100%"></textarea> 
    </td> 
    </tr> 
</table> 

Здесь у меня есть 2 флажка с классом disableEnableField. Каждый флажок отключает другие элементы (4 флажков, 1 текстовое поле, все с классом EnableDisable [I])

Теперь мой Javascript, чтобы обработать клик события 2 основных флажков

$(function() { 
    $(".disableEnableField").change(function() { 
    if ($(this).is(':checked')) { 
     $('.enableDisable1').prop("disabled", false) 
    } else { 
     $('.enableDisable1').prop("disabled", true) 
    } 
    }); 
}); 

Вот рабочий пример моей установки (с неправильной функциональностью): https://jsfiddle.net/normangr7/Lckjcr9u/1/

С демоверсией, если вы нажмете на семестр1, правильные соответствующие элементы изменят свое свойство отключения. Однако с семестром2 это неверно, потому что я жестко закодировал свойства. Мне нужно, чтобы onclick забирал соответствующие элементы, которые нужно изменить флажком. Может быть, через свойство элемента?

Answer 1

Ну вы можете сделать следующее:

1. вы должны пометить все соответствующие материалы, которые вы хотите, чтобы вызвать, возможно, с отчетливым классом
2. добавить информацию, какой класс должен быть запущен в флажки
3. создать общую триггерную функцию

Вы уже сделали номер один.

номер два может быть реализован с помощью атрибута данных в флажках

<input type="checkbox" name="Sem2CourseOffer" data-trigger-class="enableDisable2"... 

и общая функция должны делать что-то вроде

$(".disableEnableField").on('click', function(event) { 
    className = $(this).data('trigger-class'); 
    if ($(this).is(':checked')) { 
     $('.' + className).prop("disabled", false) 
    } else { 
     $('.' + className).prop("disabled", true) 
    } 
} 

HTH

Answer 2

Это включает или отключает все элементы следующая ячейка:

$(function() { 
    $(".disableEnableField").change(function() { 
    if($(this).is(':checked')) { 
     $(this).closest('td').next('td').find('*').prop("disabled", false); 
    } else { 
     $(this).closest('td').next('td').find('*').prop("disabled", true); 
    } 
    }); 
}); 

Fiddle