隐藏与空文本区域相关的按钮（选择问题）答案

【问题标题】：Hide buttons related to empty textareas (selecting issue)隐藏与空文本区域相关的按钮（选择问题）
【发布时间】：2014-02-28 13:22:51
【问题描述】：

我正在为 jQuery 选择而苦苦挣扎：我有一个包含这些列（或多或少）的表

姓名（输入字段）
姓氏（输入字段）
注释（文本区域）
按钮（提交相关注释的按钮）

我想隐藏所有 textarea 为空的按钮（以避免提交）。这是表格：

单行的DOM结构很简单（我觉得）：

所以，我想选择类似“包含在 td 中的所有按钮，它是包含空文本区域的 td 的兄弟”...anf anf...我可以使用单个 jQuery 选择或不是？先感谢您。

【问题讨论】：

与其把时间浪费在创建图像上，不如创建一个 jsfiddle.. 只是说..

标签： javascript jquery html css jquery-selectors

【解决方案1】：

您可以使用下一个选择器隐藏 onLoad 按钮：

$('textarea:empty').parent().next('td').find('button').hide();

或者如果你想禁用按钮：

$('textarea:empty').parent().next('td').find('button').prop("disabled", true);

检查用户是否在页面上的文本区域中输入了某些内容并启用或不启用按钮会很有用：

 $( $('textarea') ).blur(function() {
    var button = $(this).parent().next('td').find('button');
    if($(this).val() === ''){
       button.prop("disabled", true);
    }else{
       button.prop("disabled", false);
    }
 });

您可以使用包含的表格检查此小提琴： http://jsfiddle.net/6B9XA/4/

【讨论】：

我们可以使用 .change() 代替 .blur() 吗？
是的，您可以使用 change() 事件而不是 blur()。它对表单元素更具体，所以，这是一个好主意。如果用户不更改 textarea 内容，则不会触发任何事件....好多了:)
onChange 在您退出 textarea 时发生（如 onBlur）。我认为当 textarea 中包含的文本发生更改时会发生 onChange（以“交互地”检查 textarea 是否为空）
JQuery “检查”当用户退出/模糊元素时内容是否发生了变化，如果确实发生了变化，则触发事件。如果我没记错的话，这就是变化和模糊之间的区别。
我用这个解决了第二个问题："$("textarea").bind('input', function(){})" 检查 textarea 中的文本是否在每次按键时发生变化

【解决方案2】：

您可以使用filter() 仅获取该行中包含空文本区域的按钮

$('tr button').filter(function(){ // get all buttons
   return $(this).closest('tr').find('textarea').val() == ''; // only return those that are empty
}).prop('disabled',true); // disable the buttons

【讨论】：

【解决方案3】：

我认为你应该这样使用它：

$("#yourtableid").find("textarea").each(function() {
    if (this.value == "") {
       $(this).closest("tr").find("button").prop("disabled", true);
    }
});

"#yourtableid"这应该更改为您的表ID。

Selectors optimization for performance boost.

【讨论】：

【解决方案4】：

试试这个

$('table textarea').change(function()
{
    var thisval=$.trim($(this).html())
    if(thisval=='')
    {
      $(this).parent().next().children('button').attr('disabled')
    }
})

【讨论】：

【解决方案5】：

当然！

$("tr td textarea").each(function() {
    if (this.value == "") {
        $(this).closest("td").next("td").find("button").prop("disabled", true);
    }
});

【讨论】：