Enable/disable Submit Button Based On Radio Buttons

Question

I have a form layed out like this:

Solution 1:

$(function () {
    var $join = $("input[name=join]");
    var processJoin = function (element) {
        if(element.id == "tandcn") {
            $join.attr("disabled", "disabled");
        }
        else {
            $join.removeAttr("disabled")
        }
    };

    $(":radio[name=player1rules]").click(function () {
        processJoin(this);
    }).filter(":checked").each(function () {
        processJoin(this);
    });
});

Solution 2:

$(":radio[name='player1rules']").click(function() {
    var value = $(this).val();
    if (value === "n") {
        $("#join").attr("disabled", "disabled");
        return;
    }
    $("#join").removeAttr("disabled");
});

Example on jsfiddle

Solution 3:

Lots answers based on jquery (which I recommended to use). Here your form with javascript

<scripttype="text/javascript">functiondisable(id){
document.getElementById(id).disabled = 'disabled';
}
functionenable(id){
document.getElementById(id).disabled = '';
}
</script><formaction="join-head-2-head.php"method="POST"enctype="application/x-www-form-urlencoded"><tableborder="0"cellspacing="4"cellpadding="4"><tr><tdcolspan="2"><inputname="player1rules"type="radio"id="tandcy"value="y"onclick='enable("join")' /><labelfor="tandcy">I  Have Reviewed The Rules And The Terms & Conditions And Agree To Abide By Them</label></td></tr><tr><tdcolspan="2"><inputname="player1rules"onclick='disable("join")'type="radio"id="tandcn"value="n"checked="checked" /><labelfor="tandcn">I Do Not Agree To The Terms And Condtions And/Or Have Not Read The Rules</label></td></tr><tr><tdwidth="100"><inputname="player1"type="hidden"value="<?$session->username; ?>" /></td><td><inputtype="submit"DISABLEDname="join"id="join"value="Take Available Slot" /></td></tr></table></form>

However more elegant way is use jquery.

Solution 4:

    $(document).ready(function(){
        if($('#tandcy').is(':checked')){
           $('#join').attr('disabled','disabled');
        }
        if($('#tandcn').is(':checked')){
               $('#join').removeAttr('disabled','disabled');
         }
         $('#tandcn').click(function(){
               $('#join').attr('disabled','disabled');
          });
        $('#tandcy').click(function(){
           $('#join').removeAttr('disabled','disabled');
         })
});

Try this.... you need jquery for this,....

Solution 5:

$("#tandcn #tandcy").livequery('change', function(event){  

                 if ($('#tandcn').is(":checked"))
                  {
                    $('#join').hide();
                                              //or
                                        $('#join').attr("disabled", false);  
                  }
                 else($('#tandcy').is(":checked"))
                                    {
                    $('#join').show();
                                        //or
                                    $('#join').attr("disabled", false);
                  }
                  });

JavaScript Test