jQuery单选按钮如何禁用文本字段而不影响其他

Question

I need help. Im having an issue in jquery that when you click the radio button it should not be affected by the others.

This is my code:

<script>
    jQuery("input[type='radio']").change(function(){
        if(jQuery(this).val() == "Not Vote Anyone")
        {
            jQuery( ".txtfield" ).prop( "disabled", false );
        } else {
            jQuery( ".txtfield" ).prop( "disabled", true );
        }
    });
</script>

Website:

http://devsrver.com/

Answer 1

If you are using selector input[type='radio'] it will affected to all the radio buttons. You can try like this:

<script>
    jQuery("input[name='radio-743']").change(function(){
       if(jQuery(this).val() == "Not Vote Anyone"){
          jQuery( ".txtfield" ).prop( "disabled", false );
       } else {
          jQuery( ".txtfield" ).prop( "disabled", true );
       }
    });
</script>

Answer 2

You have to add difference attribute on every difference section such as A_Director, B_Director, C_Director. But same attribute on same section. For example:

<input type='radio' groupsection='A_Direction'>Note Vote Anymore
<input type='radio' groupsection='A_Direction'>John Doe
<input type='radio' groupsection='A_Direction'>Jane Doe
<input type='text' groupsection='A_Direction'> 

<input type='radio' groupsection='B_Direction'>Note Vote Anymore
<input type='radio' groupsection='B_Direction'>John Doe
<input type='radio' groupsection='B_Direction'>Jane Doe
<input type='text' groupsection='B_Direction'> 

and javascript should be:

<script>
    jQuery("input[type='radio']").change(function(){
        var groupsection = $(this).attr('groupsection');
        if(jQuery(this).val() == "Not Vote Anyone")
        {
            jQuery( ".txtfield[groupsection='"+groupsection+"']" ).prop( "disabled", false );
        } else {
            jQuery( ".txtfield[groupsection='"+groupsection+"']" ).prop( "disabled", true );
        }
    });
</script>

Answer 3

I found 2 problem in your code.

1. input[type='radio'] will affect all radio .

2. jQuery( ".txtfield" ).prop will affect all input field having class txtfield

---

There are some other good ways to do it if you agree to modify your html and css but this is the simple Change in js code.

---

    jQuery("input[name='radio-743']").change(function(){
       if(jQuery(this).val() == "Not Vote Anyone"){
          jQuery("input[name='RifleDirectorName']").prop( "disabled", false );
       } else {
          jQuery("input[name='RifleDirectorName']").prop( "disabled", true );
       }
    });

Similarly you have to do it for radio-744 and radio-745

jQuery("input[name='radio-744']").change(function(){
           if(jQuery(this).val() == "Not Vote Anyone"){
              jQuery("input[name='PistolDirectorName']").prop( "disabled", false );
           } else {
              jQuery("input[name='PistolDirectorName']").prop( "disabled", true );
           }
        });




 jQuery("input[name='radio-745']").change(function(){
               if(jQuery(this).val() == "Not Vote Anyone"){
                  jQuery("input[name='ShotgunDirectorName']").prop( "disabled", false );
               } else {
                  jQuery("input[name='ShotgunDirectorName']").prop( "disabled", true );
               }
            });