Переключение видимости следующей строки таблицы с флажком в jQuery

Question

У меня есть 15 элементов формы на моей странице в следующем формате:

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

Когда флажок находится в отмеченном состоянии, я бы хотел, чтобы была видна следующая строка:

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

Я мог написать несколько JS / jQuery, чтобы скрыть строки и переключать их по щелчку, но задавался вопросом, есть ли у кого-нибудь решение для переключения состояния «следующего элемента управления», чтобы я мог таким образом подключить его к каждому флажку в моей форменужно сделать это только один раз, чтобы придерживаться DRY.

Вот разметка из первой пары строк:

    <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

http://jsfiddle.net/DQZah/9/

$('input.check-box').change(function() {
    if($(this).is(':checked')) {
        $(this).closest('tr').next().fadeIn('fast');
    } else {
        $(this).closest('tr').next().fadeOut('fast');
    }
});​

По сути, получите ближайший tr на чеке, затем покажите его:)

Answer 2

Обратите внимание, что последний вызов change () должен обрабатываться при первой загрузке страницы (т. Е. Если флажок начинается без отметки, следующая строка скрыта). Не уверен, что вам это нужно, но обычно мне приходится использовать это в подобных ситуациях.

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

Answer 3

Не уверен, что полностью понимаю ваш вопрос (никогда раньше не углублялся в ASP), но вот что я сделаю, чтобы сделать следующий элемент видимым при нажатии флажка, используя jQuery 1.7.x:

$(function(){

    $('yourCheckbox').on('change', function(){
        if ($(this).is(':checked')) //if this box is checked
        {
            $(this).parents('tr').next('tr').show(); 
            //show the <tr> elem that comes after the current one 
        }
    });
});

еще раз извините, если я получил это задом наперед.Другое дело, что между вашими первыми двумя фрагментами HTML нет разницы, почему это так?

Надеюсь, это поможет в любом случае