Question

我有一个名为rblDependants的asp：RadioButtonList 它呈现如下和一个面板pnlDependants，我需要在单选按钮选择为“否”时隐藏它，并在其“是”时显示它。我从论坛中尝试了一些片段，似乎没有一个工作正常。任何人都可以帮助我....！

  <table id="ctl00_ContentPlaceHolder1_ctl02_rblDependants"  border="0" style="border-width:0px;">
        <tr>
            <td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="Yes" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0">Yes</label></td>
        </tr><tr>
            <td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="No" checked="checked" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1">No</label></td>
        </tr>
</table>

<div id="ctl00_ContentPlaceHolder1_ctl02_pnlDependants">

                    <div class="QuestionWrapper">

                        <div class="Question">
                            <label for="">No. of Dependants</label>
                        </div>
                        <div class="Answer">
                            <input name="ctl00$ContentPlaceHolder1$ctl02$txtNoOfDependants" type="text" maxlength="2" id="ctl00_ContentPlaceHolder1_ctl02_txtNoOfDependants" />
                        </div>
                        <div class="ClearFloat"></div>
                    </div>

Answer 1

这样的事情应该有效：

$("table[id$=_rblDependants] :radio").change(function() {
    $(this).closest('table').next().toggle(this.checked && this.value == 'Yes');
}).change();

这适用于任意数量的重复控件，因为它相对找到<div id="X_pnlDependants">。我们所有人都在使用<table> ID为ends-with _rblDependants的{{1}}，在其中加入:radio个按钮并绑定到他们的.change()事件。然后更改它们中的任何一个，检查结果是value="Yes"并且它是.checked，如果是这种情况则显示面板，否则通过.toggle(bool)隐藏它。

.closest()和.next()要升级到<table>，然后转到下一个要素<div>，因为这是您要隐藏/显示的内容。最后的.change()是最初触发处理程序，因此如果最初选中“否”，则会在加载时隐藏<div>。

You can give it a try here

asp：RadioButtonList和jQuery显示隐藏面板

1 个答案: