如何使用jQuery禁用textarea + Submit按钮？

After a user submits a comment, I want the textarea and summit button to be "disabled" and somewhat visually disabled.

在用户提交评论后,我希望textarea和summit按钮被“禁用”并且在视觉上被禁用。

Like Youtube.

How can I do that with Jquery using the simplest plugin and/or method?

如何使用最简单的插件和/或方法使用Jquery?

6 个解决方案

#1

Simply set the disabled attribute on your input elements when the button is clicked:

只需在单击按钮时在输入元素上设置disabled属性:

$("#mybutton").click(function(){
   $("#mytext,#mybutton").attr("disabled","disabled"); 
});

Example: http://jsfiddle.net/jonathon/JcXjG/

#2

$(document).ready(function() {
    $('#idOfbutton').click(function() {
        $('#idOfTextarea').attr("disabled", "disabled");
        $('#idOfbutton').attr("disabled", "disabled");
    });
});

This basically says: When the document is "ready", attach an event handler to the button's (HTML ID "idOfButton") click event which will set the disabled attribute of the textarea (HTML ID "idOfTextarea") and the button.

这基本上说:当文档“准备好”时,将事件处理程序附加到按钮的(HTML ID“idOfButton”)单击事件,该事件将设置textarea的禁用属性(HTML ID“idOfTextarea”)和按钮。

#3

 $('form').submit(function(){
        return false;
    });

#4

    jQuery(document).ready(function() {
    $('form').submit(function(){
        $('input[type=submit]', this).attr('disabled', 'disabled');
    });
   });

#5

$('#btn').click(function(){
    $(this, '#textarea').attr('disabled', 'disabled');
})

#6

So first handle the event where the user submits the comment and then disable the textarea and submit button. (assuming your submit button can be selected with "input#submit-comment" and your textarea can be selected with "textarea". The addClass part is optional but can be used for you to style those elements differently if they happen to be disabled.

因此,首先处理用户提交注释的事件,然后禁用textarea和submit按钮。 (假设您可以使用“input#submit-comment”选择提交按钮,并且可以使用“textarea”选择您的textarea .addClass部分是可选的,但如果它们恰好被禁用,可以用来对这些元素进行不同的样式设置。

$("input#submit-comment").click(function(){
     $("textarea").attr("disabled", "disabled").addClass("disabled");
     $(this).attr("disabled", "disabled").addClass("disabled");
     // ... Actually submit comment here, assuming you're using ajax
     return false;
}