javascript - EnableDisable a button on select of radio button in jquery - Stack Overflow

admin管理员组

文章数量:1326299

I have a page in which there are 2 radio buttons and a next button. I have made next button disabled and it is enabled only when I select any radio button. But now when I go to another page and e back to this page the next button es as disabled although the radio button is already selected. PFB the code

$(document).ready(function () {
     $('#mandButton_1_0').attr('disabled', 'true');
     $('input:radio[name=a_SignatureOption]').click(function () {
         var checkval = $('input:radio[name=a_SignatureOption]:checked').val();
         if (checkval == '1' || checkval == '2') {
             $('#mandButton_1_0').removeAttr('disabled');
         }
     });
});

I have a page in which there are 2 radio buttons and a next button. I have made next button disabled and it is enabled only when I select any radio button. But now when I go to another page and e back to this page the next button es as disabled although the radio button is already selected. PFB the code

$(document).ready(function () {
     $('#mandButton_1_0').attr('disabled', 'true');
     $('input:radio[name=a_SignatureOption]').click(function () {
         var checkval = $('input:radio[name=a_SignatureOption]:checked').val();
         if (checkval == '1' || checkval == '2') {
             $('#mandButton_1_0').removeAttr('disabled');
         }
     });
});

• javascript
• jquery

Share Improve this question Follow edited Jun 12, 2013 at 4:16 Arun Unnikrishnan 2,34922 gold badges2525 silver badges4040 bronze badges asked Jun 12, 2013 at 4:03 Neha JainNeha Jain 311 gold badge11 silver badge55 bronze badges 1

• Can you create jsfiddle for the same ? – jaychapani Commented Jun 12, 2013 at 4:06

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 1

Try

$(document).ready(function() {
    $('input:radio[name=a_SignatureOption]').click(function() {
        var checkval = $('input:radio[name=a_SignatureOption]:checked').val();
        $('#mandButton_1_0').prop('disabled', !(checkval == '1' || checkval == '2'));
    });
});

Demo: Fiddle

I took time to understand your problem,

This can be solved by unchecking the radio while loading the page.

$(document).ready(function () {
    $('input:radio[name=a_SignatureOption]').prop('checked', false);
    $('#mandButton_1_0').attr('disabled', 'true');  
    $('input:radio[name=a_SignatureOption]').click(function () {
    var checkval = $('input:radio[name=a_SignatureOption]:checked').val();
    if (checkval == '1' || checkval == '2') {
        $('#mandButton_1_0').removeAttr('disabled');
    }
});
});

check out JSFiddle, btw redirect to other site and press back button to find the difference.

Hope you understand.

// Try this.............

$(document).ready(function () {
$("input:radio[name=a_SignatureOption]").removeAttr('checked'); 
$('#mandButton_1_0').attr("disabled","disabled");

 $('input:radio[name=a_SignatureOption]').click(function () {
    var checkval = $('input:radio[name=a_SignatureOption]:checked').val();   
     if (checkval == '1' || checkval == '2') {

         $('#mandButton_1_0').removeAttr("disabled","disabled");
     }
 });

});

It is simple as your question is

<form name="urfrm">
<input type="radio" value="1" name="a_SignatureOption"> Yes<br>
<input type="radio" value="2" name="a_SignatureOption"> No<br>
<input type="submit" id="butn" name="butn" value="next" disabled><br>
</form>
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    //This will check the status of radio button onload
    $('input[name=a_SignatureOption]:checked').each(function() {
        $("#butn").attr('disabled',false);
    });

    //This will check the status of radio button onclick
    $('input[name=a_SignatureOption]').click(function() {
        $("#butn").attr('disabled',false);
    });
});
</script>

The easiest solution I can think of - albeit somewhat belatedly, is:

// selects all input elements, whose name is 'a_SignatureOption' and whose
// type is 'radio'
// binds a change event-handler, using 'on()':
$('input[name=a_SignatureOption][type="radio"]').on('change', function(){
    // sets the 'disabled' property of the button to 'true' if zero radio inputs
    // are checked, or to false if one is checked:
    $('#mandButton_1_0').prop('disabled', $('input[name=a_SignatureOption][type="radio"]:checked').length === 0);
// triggers the change event-handler on page load:
}).change();

References:

• Attribute-equals ([attribute="value"]) selector.
• change().
• on().
• prop().

On load of document you need to check whether radio button is clicked or not

$(document).ready(function() {
  $('input:radio[name=a_SignatureOption]').each(function() {
         checked(this);
  });

  $('input:radio[name=a_SignatureOption]').click(function() {
    checked(this);
  });

  function checked(obj){
    if($(obj).is(':checked')) {
        $('#mandButton_1_0').removeAttr('disabled');
    }else{
        $('#mandButton_1_0').attr('disabled', 'true');
    }
  }
});

You forgot to check the buttons at the beginning.

$(document).ready(function () {
    $('#mandButton_1_0').attr('disabled', 'true');
    if( $('input[name=a_SignatureOption]:checked' ).size() > 0 ) {
       $('#mandButton_1_0').removeAttr('disabled');
    }
    $('input[name=a_SignatureOption]').click(function () {
        if( $('input:radio[name=a_SignatureOption]:checked' ).size() > 0 ) {
            $('#mandButton_1_0').removeAttr('disabled');
        }
    });
});

By the way, I always suggest to add classes to form elements and work with those, instead of using [name="..."]. It's quicker and simplier and you can change input names (if necessary) without touching js

    <html>
<head>
<script src="http://code.jquery./jquery-1.10.2.js"></script>

<script>
    $(document).ready(function () {
        $('#mandButton_1_0').attr('disabled', 'true');

        $('input:radio[name=a_SignatureOption]').click(function () {
            var checkval = $('input:radio[name=a_SignatureOption]:checked').val();
            alert(checkval)
            if (checkval == '1' || checkval == '2') {
                $('#mandButton_1_0').removeAttr('disabled');
            }
            else {
                $('#mandButton_1_0').attr('disabled', 'disabled');
            }
        });
    });
</script>
</head>
<body>
  <input type="radio" name="a_SignatureOption" value="1" /> value1
    <br />
    <input type="radio" name="a_SignatureOption" value="2"/> value2
    <br />
    <input type="radio" name="a_SignatureOption" value="3" checked="checked"/> value3
    <br />
    <input type="button" id="mandButton_1_0" value="Next"/>
</body>
</html>

本文标签： javascriptEnableDisable a button on select of radio button in jqueryStack Overflow