jquery - 如何使用 JQuery 启用/禁用基于单选按钮的文本框

Question

我有 2 个单选按钮和 2 个文本框。我想启用/禁用基于单选按钮的文本框。当页面首次加载时，txtB 应被禁用。并且只有当其相应的单选按钮 B 被选中时才会启用。您能指导我如何做到这一点吗？

JQuery

 $("document").ready(function () {
           $('#M').on('change', '.ABC input[type = "radio"]', function () {
                    var divA = $('.P').find('#A'); 

                    var lblA = $('.panel-heading').find('#lblA'); 

                    var id = $(this).val();              
                    if (id == "A")
                    {

                        $(lblB).hide();
                        $(lblA).show();
                    }


                   $('#' + id).show();

               });
        });

       $("document").ready(function () {
           $('#M').on('change', '.CDE input[type = "radio"]', function () {                           
                    var lblA = $('.panel-heading').find('#lblA'); 
                    var lblB = $('.panel-heading').find('#lblB'); 

                    var id = $(this).val();              
                    if (id == "B")
                    {
                        $(divA).hide();

                        $(lblB).show();
                    }

               });
        });

单选按钮

<div class="ABC">
                <label>
                    @Html.RadioButtonFor(m => m.Name, "A", new { 
                       @checked = "checked" })<span>A</span>
                </label>
           </div>
       <div class="CDE">
           @Html.RadioButtonFor(m => m.Name, "B")<span>B</span>
       </div>

文本框

    <div class="P">
        <div id="A" class="container">
            @Html.TextBoxFor(m => m.txtA)
         </div>

    </div>     

    <div id="B">
      @Html.TextBoxFor(m => m.txtB)                         
     </div> 

Answer 1

使用 disabled 属性禁用 txtB。

<div class="ABC">
     <label>
         @Html.RadioButtonFor(m => m.Name, "A", new
         {
             @checked = "checked"
         })<span>A</span>
     </label>
</div>
<div class="CDE">
        @Html.RadioButtonFor(m => m.Name, "B")<span>B</span>
</div>

<div class="P">
    <div id="A" class="container">
        @Html.TextBoxFor(m => m.txtA)
     </div>
</div>
<div id="B">
        @Html.TextBoxFor(m => m.txtB, new
        {
               // Make this textbox disabled as you need this textbox to be disabled on page load
               @disabled = "disabled" 
        })
</div> 

使用以下 jquery，

// Fire on radio button checked event    
$('input[type="radio"]').change(function () {

    // Get the value of currently clicked radio button
    var value = $(this).val();

    // Find the corresponding textbox inside the div that has the id same as radio button value and remove it disabled attribute
    $('#' + $(this).val())
    .children('input[type="text"]')
    .removeAttr('disabled');

    // Find all radio button and find its corresponding textbox and make it disable except the checked radio button.
    $('input[type="radio"]').each(function () {
        if(this.value != value)
        {
            $('#' + this.value)
            .children('input[type="text"]')
            .attr('disabled', 'disabled');
        }
    })
});