如何使用 onclick javascript 函数禁用按钮？

How do you disable a button using an onclick javascript function?

提问by Howf Chat

I need to remove button click event after press. How can I edit the function so whenever it's clicked, it gets disabled then runs the url, or vise-versa.

我需要在按下后删除按钮单击事件。如何编辑该函数，以便在单击该函数时将其禁用，然后运行 ​​url，反之亦然。

<form id="edit" action="" method="post">
    <input type="submit" name="button" onclick="this.value='test...'; MyFunction();" id="1" class="button blue" value="Submit">
</form>
<script>
    function MyFunction() {
        var url = "editing.php";
        document.getElementById("edit").setAttribute('action', url);
        return false;
    }
    $(".blue").click(function(){
        $(".blue").removeClass("disabled");
        $(this).addClass("disabled");
    });
</script>

回答by adeneo

Remove the onclick, and do it the proper way :

删除onclick，并以正确的方式进行：

<form id="edit" action="" method="post">
  <input type="submit" name="button" id="a1" class="button blue" value="Submit">
</form>
<script type="text/javascript">
$(function() {
    $('#a1').on('click', function() {
        $(this).val('test...').prop('disabled', true);
        $("#edit").attr('action', 'editing.php');
        return false;
    });
});
</script>

回答by martriay

$(".blue").click(function(){
  $(this).attr('disabled', true);
});

回答by BenM

You can do this easily through jQuery using the attr()function:

您可以使用以下attr()函数通过 jQuery 轻松完成此操作：

$('.blue').click(function() {  
    $(this).attr('disabled', 'disabled');
});

By the way, I noticed that you're using jQuery. Why not 'jQuery-ify' your whole code:

顺便说一下，我注意到您正在使用 jQuery。为什么不“jQuery-ify”你的整个代码：

function MyFunction() {
    var url = "editing.php";
    $("#edit").attr('action', url);
    return false;
}

$(".blue").click(function(){
    $(this).addClass("disabled").attr('disabled', true);
});

回答by Onur Y?ld?r?m

To make the .bluebutton clickable only once. The .one()method of jQuery is just the thing for you. Here is the documentation.

使.blue按钮只能点击一次。.one()jQuery的方法正适合您。这是文档。

$("#edit > .blue").one("click", function() {
    //Code here will only run once.
}); 

"How can I edit the function so whenever it's clicked, it gets disabled then runs the url, or vise-versa."

“我如何编辑该功能，以便无论何时单击它，它都会被禁用然后运行 ​​url，反之亦然。”

I think you want the form to be submitted only once here; so:

我认为您希望表单在这里只提交一次；所以：

<form id="edit" action="" method="post">
    <input type="submit" name="button" class="button blue" value="Submit" />
</form>

<script>
    //To make the form SUBMITTABLE ONLY ONCE:
    $("#edit").one("submit", function() { 
        $(".blue").prop("disabled", true); //you can still set the button disabled if you like
        $('#edit').attr('action', "editing.php"); //setting the action attribute here
    });
</script>

I don't know what your DOCTYPEis but if it's HTML4; you cannot have numeric ID for an HTML element. HTML5 seems to allow that. See this post.

我不知道你DOCTYPE是什么，但如果它是 HTML4；HTML 元素不能有数字 ID。HTML5 似乎允许这样做。看到这个帖子。

Demo Fiddle here.

演示小提琴在这里。

回答by Olaf Dietsche

Just set the disabledattribute

只需设置disabled属性

$('.blue').attr('disabled', 'disabled');

JSFiddle

JSFiddle

---

---

As @doppelgreener pointed out, propis equally valid here

正如@doppelgreener 指出的，prop在这里同样有效

$('.blue').prop('disabled', true);

JSFiddle

JSFiddle

回答by Matt

<input type="submit" name="button" onclick="$(this).attr('disabled', 'disabled')"/>

回答by Parv Sharma

document.getElementById('1').setAttribute('disabled', 'disabled');