asp: RadioButtonList и jQuery, чтобы показать скрыть панель - PullRequest
Новая
       7

asp: RadioButtonList и jQuery, чтобы показать скрыть панель

1 голос
/ 10 августа 2010

У меня есть asp: RadioButtonList с именем rblDependants который рендерится следующим образом и панель 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>

1 Ответ

3 голосов
/ 10 августа 2010

Примерно так должно работать: 

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

Это будет работать для любого количества повторяющихся элементов управления, поскольку оно находит <div id="X_pnlDependants"> относительно. Все, что мы делаем, это взятие <table> удостоверения личности , заканчивающегося _rblDependants, взятие любых кнопок :radio внутри и привязка к их .change() событие. Затем любой из них изменяется, он проверяет, что результат был value="Yes", и это было .checked, если это так, покажите панель, в противном случае скрывайте ее через .toggle(bool) .

.closest() и .next() должны подняться до <table>, затем к следующему элементу, <div>, так как это то, что вы хотите скрыть /шоу. .change() в конце должен изначально вызывать обработчик, поэтому, если «Нет» изначально проверено, он скрывает <div> при загрузке.

Вы можете попробовать здесь

...