如何使用 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');
        }
    })
});

Answer 2

给你一个解决方案

$('input[type="radio"]').change(function(){
  $('#' + $(this).val())
    .removeAttr('disabled')
    .siblings('input[type="text"]')
    .attr('disabled', 'disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" value="text1" checked name="textbox">Textbox 1
<input type="radio" value="text2" name="textbox">Textbox 2

<br/>

<input type="text" id="text1" />
<input type="text" id="text2" disabled/>

希望这会对你有所帮助。

详情： 哪个单选按钮将被点击相应的文本框将被启用。

假设： 你的文本框是兄弟姐妹

在你的场景中，

$('input[type="radio"]').on('change', function() {
  $('#' + $(this).find('span').text())
    .find('input[type="text"]')
    .removeAttr('disabled')
    .closest('div')
    .siblings('div')
    .find('input[type="text"]')
    .attr('disabled', 'disabled')
});