3

目前，当文本区域集中在它上面时，它会扩展它的高度，并且会出现发布和取消按钮。现在我想默认禁用提交按钮，并且只有在输入文本区域后才将其激活。

稍后，我将为非活动提交按钮添加不透明度，然后在按钮处于活动状态时将其移除，以达到良好的效果。但无论如何，我已经尝试过多种方式应用禁用，但它不起作用。我尝试了其他各种方法，例如定义单击功能以及提交然后使用 attr() 将禁用应用到我的表单的禁用属性，它似乎没有效果。

HTML

        <div class="comment_container">
                    <%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>

                    <div class="commenter_content"> <div class="userNameFontStyle"><%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%=  simple_format h(comment.content) %> </div>
                </div><div class="comment_post_time"> <%= time_ago_in_words(comment.created_at) %> ago. </div>


           </div>


                    <% end %>
                <% end %>


            <% if logged_in? %>
            <%= form_for @comment, :remote => true do |f| %>
            <%= f.hidden_field :user_id, :value => current_user.id %>
            <%= f.hidden_field :micropost_id, :value => m.id %>
            <%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>

    <div class="commentButtons">         
      <%= f.submit 'Post it', :class => "commentButton" %>
   <div class="cancelButton"> Cancel </div>
    </div>   
            <% end %>

            <% end %>

查询：

$(".microposts").on("focus", ".comment_box", function() {
    this.rows = 7;


    var $commentBox = $(this),
        $form = $(this).parent(),
        $cancelButton = $form.children(".commentButtons").children(".cancelButton");
       // $commentButton = $form.children(".commentButtons").children(".commentButton");
            $(this).removeClass("comment_box").addClass("comment_box_focused").autoResize();  
            $form.children(".commentButtons").addClass("displayButtons");

                $cancelButton.click(function() {
                    $commentBox.removeClass("comment_box_focused").addClass("comment_box");
                    $form.children(".commentButtons").removeClass("displayButtons");
                    $commentBox.val("");



                });

});

亲切的问候

4

5 回答 5

5

设置 disabled 属性不起作用，因为如果 disabled 属性存在，则无论该属性的值如何，该字段都会被禁用。您可以使用，但操作更直观的属性.removeAttr("disabled")确实最有意义- 它只是一个布尔值。disabled 

$commentButton.prop({ disabled: !$commentBox.val());

为了安全起见，绑定到onkeyup、oninput和onchange：

$commentBox.on("keyup input change", function () {
    $commentButton.prop({ disabled: !$commentBox.val() });
});

如果您需要手动启用或禁用按钮，例如清除表单后，您可以通过true或false直接调用.prop().

$commentButton.prop({ disabled: true });



编辑：详细分类

.prop()方法_

该.prop()方法获取和设置元素的属性值，类似于.attr()获取和设置元素的属性值。

考虑到这个 jQuery：

var myBtn = $("#myBtn");
myBtn.prop("disabled", true);

我们可以像这样用普通的 JavaScript 重写它：

var myBtn = document.getElementById("myBtn");
myBtn.disabled = true;

为什么我们不需要if声明

我们不需要if声明的原因是该disabled属性采用布尔值。我们可以在语句中放置一个布尔表达式if，然后根据结果分配一个不同的布尔表达式作为属性的值：

if (someValue == true) {
    myObj.someProperty = false;
}
else {
    myObj.someProperty = true;
}

第一个问题是if语句中的冗余： if (someValue == true)可以缩短为if (someValue). 其次，可以使用逻辑非运算符 ( !)将整个块缩短为单个语句：

myObj.someProperty = !someValue;

逻辑非运算符 ( !) 返回表达式的否定结果 - 即true“假”值和false“真”值。如果您不熟悉“真实”和“虚假”的价值观，这里有一个快速入门。任何时候您在需要布尔值的地方使用非布尔值时，该值都会被强制转换为布尔值。评估为的值true被称为“真实”，评估为的值false被称为“虚假”。

类型 假值 真值
 ——————————————————————————————————————————————————————
 数字 0, NaN 任何其他数字
 String "" 任何非空字符串
 Object null, undefined 任何非空对象

由于空字符串的计算结果为 false，我们可以通过应用!该值来获得一个布尔值，指示文本区域中是否有任何文本：

var isEmpty = !$commentBox.val();

或者，用于!!进行双重否定并有效地将字符串值强制为布尔值：

var hasValue = !!$commentBox.val();

我们可以用纯 JavaScript 将上面的 jQuery 重写为更详细的形式：

var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
var text = myTextBox.value;
var isEmpty = !text;
if (isEmpty) {
    myBtn.disabled = true;
}
else {
    myBtn.disabled = false;
}

或者，更短一点，更类似于原版：

var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
myBtn.disabled = !myTextBox.value;
于 2012-04-14T16:56:32.237 回答
2

你可以试试这个：

var submit = $("input[type=submit]");
submit.attr("disabled","disabled");

$('textarea.comment_box').keyup(function() {
    if ( !$(this).val() ) {
       submit.attr("disabled","disabled");
    } else {
       submit.removeAttr("disabled");
    }
});

这是一个 JS Fiddle，您可以尝试一下：http: //jsfiddle.net/leniel/a2BND/

于 2012-04-14T16:44:20.700 回答
1

您可以先禁用提交按钮，如果 textarea 有值则启用它：

<form id="yourForm">
<textarea id="ta"></textarea>
<input id="submit" type="submit" disabled="disabled">    
<form> 

$("#yourForm").change(function() {

  if ( $("#ta").val().length >= 1) {

    $("#submit").removeAttr("disabled"); 
  }

  else {

    $("input").attr("disabled", "disabled");

  }              

});

http://jsfiddle.net/dY8Bg/2/

于 2012-04-14T16:52:38.440 回答
0

您可以使用文本区域上的 keyup 事件来完成此任务。下面的示例概念代码。

$("#textareaid").on('keyup', function (e) {
     Count_Chars(this);
});

function Count_Chars(obj) {
    var len = obj.value.length;
    if (len >= 1) {
        // do task
        // enable post button
    }
}

​</p>

于 2012-04-14T16:51:44.747 回答
0

将此添加到现有代码中以完成我想要的。将最能帮助我的答案标记为获胜答案，并标记其他有帮助的答案。

commentButton = form.children(".commentButtons").children(".commentButton");

       commentButton.attr("disabled","disabled");

        commentBox.keyup(function() {
            if ( !$(this).val() ) {
               commentButton.attr("disabled","disabled");
            } else {
               commentButton.removeAttr("disabled");
            }
        });
于 2012-04-14T19:37:18.213 回答