Включить/отключить элементы управления при выборе радио с помощью jquery

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

ASP-фрагмент

                <div class="form-group" >
                    <label class="control-label">Whether any other children of the same family is studying in Primary/ Secondary Section of SVVHS</label><br />
                    <input type="radio" value="yes" id="chkRelatedStudentYes" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">Yes</label><br />
                    <input type="radio" value="no" id="chkRelatedStudentNo" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">No</label>
                 </div>
                <div class="form-group">
                    <label class="control-label">Name of the Student</label>
                    <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name of the Related Student" id="txtRelatedStudentName" runat="server" disabled="disabled" />
                </div>
                <div class="form-group">
                    <label class="control-label">Section</label><br />
                    <input type="radio" value="Primary" id="chkPrimary" runat="server" name="Section"  required="required" disabled="disabled"/> <label class="control-label">Primary</label><br />
                    <input type="radio" value="Secondary" id="chkSecondary" runat="server" name="Section"  required="required" disabled="disabled"/> <label class="control-label">Secondary</label>
                </div>
                <div class="form-group">
                    <label class="control-label">Standard</label>
                    <input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Standard of the Related Student" id="txtStandard" runat="server" disabled="disabled"/>
                </div>
                <div class="form-group">
                    <label class="control-label">Division</label>
                    <input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Division of the Related Student" id="txtDivision" runat="server" disabled="disabled"/>
                </div>

фрагмент jquery

        <script type="text/javascript">
            $('#chkRelatedStudentYes').click(function () {
                $('#txtRelatedStudentName').removeAttr("disabled");
                $('#chkPrimary').removeAttr("disabled");
                $('#chkSecondary').removeAttr("disabled");
                $('#txtStandard').removeAttr("disabled");
                $('#txtDivision').removeAttr("disabled");
            });
            $('#chkRelatedStudentNo').click(function () {
                $('#txtRelatedStudentName').attr("disabled", "disabled");
                $('#chkPrimary').attr("disabled", "disabled");
                $('#chkSecondary').attr("disabled", "disabled");
                $('#txtStandard').attr("disabled", "disabled");
                $('#txtDivision').attr("disabled", "disabled");
            });
</script>

javascript jquery asp.net visibility disabled-control
person Aaditya Ganapathy    schedule 26.03.2016    source источник
comment
просто поместите предупреждение() в начале документа. прочитайте и проверьте, запускается ли этот jquery или нет, и возвращайтесь   -  person abhi    schedule 26.03.2016
comment
Да. Я получил предупреждение. Его увольняют. Хотя я поместил предупреждение в приведенный ниже скрипт. Не работает при нажатии $(input[name=RelatedStudent]:radio).click(function() {});   -  person Aaditya Ganapathy    schedule 26.03.2016
comment
тогда код кажется в порядке, я проверил его в скрипте, и все кажется в порядке, вы пробовали консоль, какую ошибку она там дает   -  person abhi    schedule 26.03.2016
comment
Я тоже не получаю никаких ошибок в консоли ..   -  person Aaditya Ganapathy    schedule 26.03.2016
comment
только что обратил внимание на эту строку nextStepWizard.removeAttr('disabled').trigger('click');. может быть, это вызывает проблему,   -  person abhi    schedule 26.03.2016
comment
Пытался прокомментировать это.. Все еще не работает.. я помещаю предупреждение о событии щелчка радио.. там тоже нет эффектов   -  person Aaditya Ganapathy    schedule 26.03.2016
comment
Я нашел решение этой проблемы. Найдите мой ответ.   -  person Aaditya Ganapathy    schedule 26.03.2016

Ответы (4)


arrow_upward
1
arrow_downward

Привет, ваш способ запуска события неверен

Пожалуйста, попробуйте это, вот полный код, который должен работать

Примечание: проверено

 $(document).ready(function() {
        $("input[name=RelatedStudent]:radio").click(function() { // attack a click event on all radio buttons with name 'radiogroup'


                if($(this).val() == 'yes') {//check which radio button is clicked 
                        $('#txtRelatedStudentName').removeAttr("disabled");
                $('#chkPrimary').removeAttr("disabled");
                $('#chkSecondary').removeAttr("disabled");
                $('#txtStandard').removeAttr("disabled");
                $('#txtDivision').removeAttr("disabled");
                } else if($(this).val() == 'no') {
                      $('#txtRelatedStudentName').attr("disabled", "disabled");
                $('#chkPrimary').attr("disabled", "disabled");
                $('#chkSecondary').attr("disabled", "disabled");
                $('#txtStandard').attr("disabled", "disabled");
                $('#txtDivision').attr("disabled", "disabled");
                } 
        });
});

Вы можете попробовать это здесь https://jsfiddle.net/abhiyx/fgen1br9/

person abhi    schedule 26.03.2016
comment
Пожалуйста, заполните код соотв. к вашим предпочтениям в событиях - person abhi; 26.03.2016
comment
да, код, упомянутый в описании, присутствовал внутри $(document).ready(function()... все еще не работал, братан - person Aaditya Ganapathy; 26.03.2016
comment
я не упоминаю о document.ready, я говорю о $(input[name=RelatedStudent]:radio).click(function(), подождите, позвольте мне найти для вас скрипку - person abhi; 26.03.2016
comment
Я тоже пробовал этот код. Я не знаю, что здесь происходит. Он все еще не работает. - person Aaditya Ganapathy; 26.03.2016
comment
ответ обновлен, попробуйте ссылку скрипки и дайте мне знать, если она работает - person abhi; 26.03.2016
comment
Это странно.. Я попытался скопировать всю свою страницу в скрипку и запустил ее.. Она отлично работает.. но не работает в моей локальной среде.. - person Aaditya Ganapathy; 26.03.2016
comment
возможно, покажите мне свой код, вы импортируете jquery, а также попробуйте проверить консоль, может быть, вы получите какую-то ошибку - person abhi; 26.03.2016
comment
Я обновил вопрос и добавил код для всей страницы. Если это поможет.. :) - person Aaditya Ganapathy; 26.03.2016
comment
Эй Абхи спасибо за ваше терпение и помощь. Я нашел решение. Пожалуйста, найдите мой ответ. - person Aaditya Ganapathy; 26.03.2016

arrow_upward
0
arrow_downward

Вы можете использовать метод jQuery prop() вместо removeAttr(). Попробуй это -

$('#chkRelatedStudentYes').click(function () {
   $('#txtRelatedStudentName').prop("disabled", false);
   $('#chkPrimary').prop("disabled", false);
   $('#chkSecondary').prop("disabled", false);
   $('#txtStandard').prop("disabled", false);
   $('#txtDivision').prop("disabled", false);
});
person Prosper    schedule 26.03.2016

arrow_upward
0
arrow_downward

Я нашел, в чем проблема. Сценарию не удалось найти элемент по идентификатору или его атрибуту NAME. Я испробовал все возможные способы запуска скрипта по щелчку элемента и понял, что он работал, когда я использовал - $("input[type=radio]:radio"), а также использовал имя класса - $(".form -control") Я изменил сценарий и использовал приведенный ниже сценарий, и он сработал.

$("input[type=radio]:radio").click(function () {
    if ($(this).val() == 'yes') {
        $(".form-control-disable").removeAttr("disabled");
            }
    else if ($(this).val() == 'no') {
        $(".form-control-disable").attr("disabled", "disabled");       
            }
});

Я использовал следующий класс для текста и элементов управления радио, которые нужно было отключить, «.form-control-disable», и это сработало. Я благодарю Абхи за его терпение и помощь. :)

person Aaditya Ganapathy    schedule 26.03.2016

arrow_upward
0
arrow_downward

Поскольку html-элементы отображаются на сервере, идентификаторы элементов будут меняться. При доступе к идентификаторам в javascript используйте следующее:

$('#<%# chkRelatedStudentYes.ClientID%>').removeAttr("disabled");
person kranthiv    schedule 26.03.2016
comment
Эй, спасибо за это. Я отмечу это! - person Aaditya Ganapathy; 26.03.2016