Enable/Disable Submit Button based on radio buttons - php

Question

I have a form layed out like this:
<form action="join-head-2-head.php" method="POST" enctype="application/x-www-form-urlencoded">
<table border="0" cellspacing="4" cellpadding="4">
<tr>
<td colspan="2"><input name="player1rules" type="radio" id="tandcy" value="y" />
<label for="tandcy">I Have Reviewed The Rules And The Terms & Conditions And Agree To Abide By Them</label></td>
</tr>
<tr>
<td colspan="2"><input name="player1rules" type="radio" id="tandcn" value="n" checked="checked" /><label for="tandcn">I Do Not Agree To The Terms And Condtions And/Or Have Not Read The Rules</label></td>
</tr>
<tr>
<td width="100"><input name="player1" type="hidden" value="<? $session->username; ?>" /></td>
<td><input type="submit" name="join" id="join" value="Take Available Slot" /></td>
</tr>
</table>
</form>
What I am hoping to do is disable the submit button if id="tandcn" is selected, and enable it when id="tandcy". Is there an easy way to do that using javascript?

Answer 1

example http://jsfiddle.net/sWLDf/
$(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);
});
});

Answer 2

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

Answer 3

Lots answers based on jquery (which I recommended to use). Here your form with javascript
<script type="text/javascript">
function disable(id){
document.getElementById(id).disabled = 'disabled';
}
function enable(id){
document.getElementById(id).disabled = '';
}
</script>
<form action="join-head-2-head.php" method="POST" enctype="application/x-www-form-urlencoded">
<table border="0" cellspacing="4" cellpadding="4">
<tr>
<td colspan="2"><input name="player1rules" type="radio" id="tandcy" value="y" onclick='enable("join")' />
<label for="tandcy">I Have Reviewed The Rules And The Terms & Conditions And Agree To Abide By Them</label></td>
</tr>
<tr>
<td colspan="2"><input name="player1rules" onclick='disable("join")' type="radio" id="tandcn" value="n" checked="checked" /><label for="tandcn">I Do Not Agree To The Terms And Condtions And/Or Have Not Read The Rules</label></td>
</tr>
<tr>
<td width="100"><input name="player1" type="hidden" value="<? $session->username; ?>" /></td>
<td><input type="submit" DISABLED name="join" id="join" value="Take Available Slot" /></td>
</tr>
</table>
</form>
However more elegant way is use jquery.

Answer 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,....

Answer 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);
}
});