啓用/禁用基於單選按鈕提交按鈕

Question

我有一個表格奠定了這樣的：

<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 &amp; 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> 

我所希望做的是禁用的提交按鈕，如果ID =「tandcn」被選中，並啓用當id =「tandcy」時。有沒有簡單的方法來做到這一點使用JavaScript？

Answer 1

例如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

$(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'); 
     }) 
}); 

試試這個.... 你需要爲這個jQuery，....

Answer 4

$("#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); 
        } 
        }); 

Answer 5

很多答案基於jQuery（我推薦使用）。這裏你的表單與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> 

但更優雅的方式是使用jQuery。