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

【问题标题】：How do you disable a button using an onclick javascript function?如何使用 onclick javascript 函数禁用按钮？
【发布时间】：2013-02-09 08:38:30
【问题描述】：

按下后我需要删除按钮单击事件。如何编辑该功能，以便在单击它时将其禁用，然后运行 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>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

删除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>

【讨论】：

【解决方案2】：

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

【讨论】：

prop() 应在此处使用，而不是 attr()。请参阅：prop vs attr。对于改变状态，prop 是合适的。

【解决方案3】：

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

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

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

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

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

【讨论】：

【解决方案4】：

使.blue 按钮只能点击一次。 jQuery 的.one() 方法正是您的理想之选。这是documentation。

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

“我怎样才能编辑这个函数，这样每当它被点击时，它就会被禁用然后运行 url，反之亦然。”

我想你希望表单在这里只提交一次；所以：

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

我不知道你的DOCTYPE 是什么，但如果它是 HTML4； HTML 元素不能有数字 ID。 HTML5 似乎允许这样做。见this post。

Demo Fiddle here.

【讨论】：

【解决方案5】：

只需设置disabled属性

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

JSFiddle

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

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

JSFiddle

【讨论】：

prop() 应在此处使用，而不是 attr()。见：prop vs attr。对于改变状态，prop 是合适的。

【解决方案6】：

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

【讨论】：

请考虑编辑您的帖子，以添加更多关于您的代码的作用以及它为何能解决问题的说明。一个大部分只包含代码的答案（即使它正在工作）通常不会帮助 OP 理解他们的问题。

【解决方案7】：

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

【讨论】：

元素 ID 不能以数字开头 ;)