标签：submit-button javascript jquery jquery-selectors
目前,当文本区域被聚焦时,它会扩展它的高度,并显示发布和取消按钮.现在我想默认禁用提交按钮,只有在输入文本区域后才激活它.
稍后,我将向不活动的提交按钮添加不透明度,然后在按钮处于活动状态时将其移除以获得良好的效果.但无论如何,我尝试过多种方式应用残疾,但它不起作用.我已经尝试了各种其他的东西,比如定义一个click函数以及提交然后使用attr()将disabled禁用到我的表单的disabled属性,它似乎没有任何效果.
<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 %>
JQuery的：
$(".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("");
});
});
亲切的问候
解决方法:
设置disabled属性不起作用,因为如果存在disabled属性,则禁用该字段,而不管属性的值如何.您可以使用.removeAttr(“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() method获取并设置元素的属性值,类似于.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).其次,使用logical not operator (!)可以将整个块缩短为单个语句：
myObj.someProperty = !someValue;
逻辑非运算符(！)返回表达式的否定结果 – 即“falsey”值为true,“truthy”值为false.如果你不熟悉“truthy”和“falsey”值,这里有一个快速入门.每次使用非布尔值时,如果需要布尔值,则将该值强制转换为布尔值.评估为真的值被称为“真实”,评估为假的值被称为“假”.
Type Falsey values Truthy values ———————— —————————————————— —————————————————————— Number 0, NaN Any other number String "" Any non-empty string Object null, undefined Any non-null object
由于空字符串的计算结果为false,我们可以通过应用获得一个布尔值,指示textarea中是否有任何文本！价值：
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;
标签：submit-button,javascript,jquery,jquery-selectors 来源： https://codeday.me/bug/20190726/1539224.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。