Question

我有一个表单中的两个提交按钮我想在点击（提交）＆amp;上禁用button2当用户单击button1时，button2将启用。抱歉愚蠢的问题我是新手。

   $(document).ready(function(){
            $(document).on("click", ".test2", function() {
                if ($('#test2').is(':visible')) {
                    $('#test2').hide();
                } else {
                    $('#test2').show();
                };
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="test" method="post">
    <input id="test" type="submit" value="button1" class="test1">
    <input id="test2" type="submit" value="button2"/>
</form>

Answer 1

变化
$(document).on("click", ".test2", function() {
到
$(document).on("click", "#test2", function() {

一旦按钮隐藏，它就不会显示，因为您在要隐藏的同一按钮上使用点击事件，在这种情况下其他无用。

当您提交表单并再次返回此表单/页面时，您将看到该按钮我不清楚你要做什么：
如果您不想提交表单，并希望执行更多操作，您需要使用：
@Nitheesh建议的e.preventDefault();并将其设为display:none或disabled

Answer 2

Clicke事件按类别出价将其更改为id

$(document).on("click", "#test2", function()

以下是示例代码。

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "#test2", function (e) {
                if ($('#test2').is(':visible')) {
                    $('#test2').hide();
                    e.preventDefault();
                } else {
                    $('#test2').show();
                    e.preventDefault();
                };
            });
        });
    </script>
</head>

<body>

    <form id="test" method="post">
        <input id="test" type="submit" value="button1" class="test1">
        <input id="test2" type="submit" value="button2" />
    </form>
</body>

</html>

＆＃13;

Answer 3

这个怎么样？将disabled添加到#test2，并在点击#test时将其删除。

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#test").on("click", function () {
				$("#test2").prop("disabled",false);
             });
        });
    </script>
</head>

<body>

    <form id="test" method="post">
        <input id="test" type="button" value="button1" class="test1">
        <input id="test2" type="button" value="button2" disabled />
    </form>
</body>

</html>

＆＃13;

Answer 4

我会改变js＆amp;有点html。

为什么呢？因为如果要在提交时禁用button2并在单击button1时启用它，最好不要在form中放置两个提交。我们提交一个提交button，以触发form提交，并设置一个<a>标记以启用button2（<a>标记不会再次触发提交事件）。

<form id="test" method="post">
  <a id="test1" href="#" class="btn btn-primary">button1</a>
  <button id="test2" type="submit" class="btn btn-primary">button2</button>
</form>

在jQuery中，我们在$(document).ready()函数中执行类似的操作：

$('#test').on('submit', formSubmit);
$('#test1').on('click', unableButton);

function formSubmit () {
  $('#test2').prop('disabled', true);

 // Here you put the rules to submit your form 
}

function unableButton (e) {
    e.preventDefault();

    $('#test2').prop('disabled', false);
}

如果你想让我这个小提琴，你可以看到代码在行动：https://jsfiddle.net/dobbinx3/Lu2ns80b/1/

氰

jQuery Click事件无法使用表单中的“提交”按钮

4 个答案: