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

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

<强> Example on jsfiddle

Answer 2

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

根据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。

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

根据单选按钮启用/禁用提交按钮

5 个答案: