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来隐藏行并在点击时切换它们，但是想知道是否有人有一个解决方案来切换“下一个控件”的状态所以我可以将它连接到我的表单中的每个复选框只需要这样做一次就能坚持干。

这是前几行的标记：

    <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

我不确定我是否完全理解你的问题（之前从未深入研究过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片段之间没有区别，为什么会这样？

希望这无论如何都有帮助

Answer 2

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 3

请注意，最后一次更改（）调用是在第一次加载页面时进行处理（即如果未选中复选框，则隐藏下一行。）不确定是否需要，但我通常最终需要使用在这种情况下。

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

使用jQuery中的复选框切换下一个表行的可见性

3 个答案: