Question

我一直在尝试创建一个表单，当选中复选框时，该按钮已启用。我尝试了jquery和javascript，但他们没有帮助。

表格的HTML代码：

<form>
    Name*: <input type="text" size="20" name="name" required /> <br /><br />
    Surname: <input type="text" size="20" /> <br />
    <br /><br />
    Mobile number: <input type="tel" size="15" /> <br /><br />
    E-mail id*: <input type="Email" size="30" name="usr_id" required /> <br /><br />
    Password*: <input type="Password" size="30" id="pw1" required /> <br /><br />
    Confirm Password*: <input type="password" size="30" id="pw2" required /> <br /><br /><br /><br />
    I accept the terms and conditions <input class="chk" type="checkbox" id="tc" /><br /><br />
    <input type="submit" id="btn" class="btn btn-lg btn-primary" value="Sign up" onclick="form_function()"/>
</form>

Javascript的form_function：

function form_function(){
        var pw = document.getElementById(pw1).value;
        var conf_pw = document.getElementById(pw2).value;

        if (pw == conf_pw){
            window.location.href('http://www.google.com/sgn_up_conf');
        } else{ 
            if (conf_pw == ""){
                window.alert("Please confirm your password");
            } else {
                if (pw == conf_pw == ""){
                    window.alert("Please enter a password");
                } else {
                    if (pw == "") {
                        window.alert("How can you confirm a password if you have not written anything?");
                    } else {
                        window.alert("Please make sure that you have confirmed the password properly");
                    }
                }
            }
        }
    };

Javascript有条件地禁用按钮：

$('#btn').prop("disabled", true);
$('#tc').click(function() {
    if ($(this).is(':checked')) {
        $('#btn').prop("disabled", false);
    } else {
        $('#btn').attr('disabled',true);}
    }
});

form_function（）工作正常，但是复选框按钮关系无效。即使未选中复选框，该按钮也处于启用状态，并执行form_function（）。

*在这个新的编辑中，我已经提供了更新的form_function（），这一次，我已经包含了两个密码字段的所有可能性。

Answer 1

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <form>
    Name*: <input type="text" size="20" name="name" required /> <br /><br />
    Surname: <input type="text" size="20" /> <br />
    <br /><br />
    Mobile number: <input type="tel" size="15" /> <br /><br />
    E-mail id*: <input type="Email" size="30" name="usr_id" required /> <br /><br />
    Password*: <input type="Password" size="30" id="pw1" required /> <br /><br />
    Confirm Password*: <input type="password" size="30" id="pw2" required /> <br /><br /><br /><br />
    I accept the terms and conditions <input class="chk" type="checkbox" id="tc" /><br /><br />
    <input type="submit" id="btn" class="btn btn-lg btn-primary" value="Sign up" disabled="disabled" onclick="form_function()"/>
</form>
</body>
    <script>
        function form_function(){

        var pw1 = document.getElementById('pw1').value;
        var pw2 = document.getElementById('pw2').value;

        if (pw1 == pw2){
            document.getElementById('btn').onclick = window.location.href("www.google.co.in/sgn_conf");
        } else {
            document.getElementById('btn').onclick = window.alert("Please make sure that both the password fields have the same text");
        }
        }

        $("#tc").change(function () {
            if (this.checked) {
                $("#btn").prop("disabled", false);
            }
            else {
                $("#btn").prop("disabled", true);
            }
        });
    </script>
</html>

检查摘录。

Answer 2

我建议您调整代码以使用更简单的设置。我将标记更改为更常规，而不是特别要求，我删除了所有<br />并使用CSS来填充空格。

至于为什么你的代码不起作用？

语法错误。
使用CLICK事件，在第一次点击时会检查哪个是好的但是如果您使用键盘进行检查/取消检查，则它不会触发，因此您应该使用更改事件来确保可以更改它的操作是占了。
你有一个href的问题和奇怪的事件挂钩，你真的想要设置它。 window.location.href = "www.google.co.in/sgn_conf";

＆＃13;

$('#btn').on('click', function() {
  if ($('#pw1').val() == $('#pw2').val()) {
    window.location.href = "www.google.co.in/sgn_conf";
  } else {
    window.alert("Please make sure that both the password fields have the same text");
  }
}).prop("disabled", true);
$('#tc').on('change', function() {
  $('#btn').prop("disabled", !this.checked);
});

＆＃13;

form div {
  margin-bottom: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <div>
    <label> Name*:
      <input type="text" size="20" name="name" required />
    </label>
  </div>
  <div>
    <label>Surname:
      <input type="text" size="20" />
    </label>
  </div>
  <div>
    <label>Mobile number:
      <input type="tel" size="15" />
    </label>
  </div>
  <div>
    <label>E-mail id*:
      <input type="Email" size="30" name="usr_id" required />
    </label>
  </div>
  <div>
    <label>Password*:
      <input type="Password" size="30" id="pw1" required />
    </label>
  </div>
  <div>
    <label>Confirm Password*:
      <input type="password" size="30" id="pw2" required />
    </label>
  </div>
  <div>
    <label>I accept the terms and conditions
      <input class="chk" type="checkbox" id="tc" />
    </label>
  </div>
  <div>
    <input type="submit" id="btn" class="btn btn-lg btn-primary" value="Sign up" />
  </div>

</form>

＆＃13;

Answer 3

您是否有额外的}？

         ...
            $('#btn').attr('disabled',true);}
        }
    ); // < --- remove }

检查此工作示例：

https://codepen.io/nilestanner/pen/wqOaaO

我建议您使用具有linting或错误检查的IDE，这样的问题将更容易调试！

Answer 4

你有额外的＆＃39;}＆＃39;

$('#btn').prop("disabled", true);
    $('#tc').on('click',function() {
        if ($(this).is(':checked')) {
            $('#btn').prop("disabled", false);
        } else {
            $('#btn').attr('disabled',true);
        }
    });

Answer 5

试试这个

$("#btn").prop('disabled', true);//disable
$('#tc').click(function() {
        if($(this).is(':checked'))
           $("#btn").prop('disabled', true);//enable
        else
            $("#btn").prop('disabled', true);//disable
    });

Answer 6

你有一个额外的结束括号。

$('#btn').prop("disabled", true);
$('#tc').click(function() {
    if ($(this).is(':checked')) {
        $('#btn').prop("disabled", false);
    } else {
        $('#btn').attr('disabled',true);} // <--
    }
});

根据复选框禁用/启用按钮

6 个答案: