CODEWITHSUNDEEP
javascriptjqueryhtml
Norman Bentley
Norman Bentley

Reputation: 660

Form a relation between two html fields

I have a checkbox, and when checked, multiple other fields become available for the user to enter data.

Now I have many of these, and it is getting difficult to handle the check events of each and every one, so I have created an onclick event to listen for the check event of a class. 

<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>

Here I have 2 checkboxes, with the class disableEnableField. Each checkbox disables other elements (4 checkboxes, 1 textarea, all with the class enableDisable[i])

Now my Javascript to handle the click events of the 2 main checkboxes

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

Here is a working demo of my setup (with the incorrect functionality): https://jsfiddle.net/normangr7/Lckjcr9u/1/

With the demo, if you click on semester1, the correct corresponding elements have their disable property changed. However with semester2, its incorrect because I hard coded the properties. I need a way for the onclick to pick up the corresponding elements that the checkbox needs to alter. Maybe via a property of the element?

Upvotes: 0

Views: 385

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

This enables or disables all elements in the next cell over:

$(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

Upvotes: 1

Martin Schneider
Martin Schneider

Reputation: 3268

Well you could do the following:

  1. you have to mark all relevant inputs you want to trigger, possibly with a distinct class
  2. add the information which class should be triggered to the checkboxes
  3. create a generic trigger function

you already have done number one.

number two could be implemented via a data attribute at the checkboxes

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

and the generic function should do something like

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

hth

Upvotes: 1

Related Questions