Question

I have 15 form elements on my page in the following format:

<tr>
  <td colspan="3" class="fieldset-table-field-3-span">
     @Html.EditorFor(model => model.ExistingProductId_MappingName_IsFreeText)
  </td>
</tr>

When the checkbox is in the checked state, I would like the next row to be visible:

<tr>
   <td colspan="3" class="fieldset-table-field-3-span">
      @Html.EditorFor(model => model.ExistingProductId_MappingName_FreeText)
   </td>
</tr>

I could write some JS/jQuery to hide the rows and toggle them on click, but wondered if anybody had a solution for toggling the state of the “next control” so I could hook it up to each checkbox in my form thus only having to do this once in order to adhere to DRY.

Here’s the markup from the first couple of rows:

    <table class="fieldset-table" align="center" cellpadding="3">
        <tr>
            <td class="fieldset-table-label">
                <label for="ExistingProductId_MappingName">Existing ID</label>
            </td>
            <td colspan="3" class="fieldset-table-field-3-span">
                <select id="ExistingProductId_MappingName" name="ExistingProductId_MappingName"><option value="">-- Not Mapped --</option>
                <option value="Id">Id</option>
                <option value="Name">Name</option>
                <option value="Cost Price">Cost Price</option>
                <option value="Unit Price">Unit Price</option>
                </select>
                <span class="field-validation-valid" data-valmsg-for="ExistingProductId_MappingName" data-valmsg-replace="true"></span>
            </td>
        </tr>
        <tr>
            <td class="fieldset-table-label">
                &nbsp;
            </td>
            <td colspan="3" class="fieldset-table-field-3-span">
                <input class="check-box" data-val="true" data-val-required="The Free text field is required." id="ExistingProductId_MappingName_IsFreeText" name="ExistingProductId_MappingName_IsFreeText" type="checkbox" value="true" /><input name="ExistingProductId_MappingName_IsFreeText" type="hidden" value="false" />
                <label for="ExistingProductId_MappingName_IsFreeText">Free text</label>
            </td>
        </tr>
        <tr>
            <td class="fieldset-table-label">
                <label for="ExistingProductId_MappingName_FreeText">Text value</label>
            </td>
            <td colspan="3" class="fieldset-table-field-3-span">
                <input class="text-box single-line" id="ExistingProductId_MappingName_FreeText" name="ExistingProductId_MappingName_FreeText" type="text" value="" />
            </td>
        </tr>

Answer 1

Note that the last change() call is to handle when the page is first loaded (i.e. if the checkbox starts unchecked, the next row is hidden.) Not sure if you need that, but I usually end up needing to use it in situations like these.

  $(function(){
    $('input.check-box[type=checkbox]').change(function(){
      $(this).closest('tr').next().toggle($(this).is(':checked'));
    }).change();
  });