Geek asks and answers

Hide buttons associated with empty text fields (question selection)

I am struggling with jQuery selection: I have a table containing these columns (more or less)

  • Name (input field)
  • Surname (input field)
  • Note (textarea)
  • Button (button for sending a relative note)

I would like to hide all buttons whose text area is empty (to avoid presentation). This is the table:

enter image description here

The DOM structure of one line is pretty simple (I think):

enter image description here

So, I would like to select something like "all buttons contained in td, which is the brother of td, which combines the empty text area" ... anf anf ... can I do this with a single jQuery choice or not? Thanks in advance.

+3
source share
5 answers

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/

+3

!

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

try it

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

I think you should use it like this:

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

"#yourtableid" this should be changed to your table id.

Optimize selectors to increase productivity.

+1
source

You can use filter () to get only buttons that contain an empty text area inside this line

$('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
+1
source

More articles:


All Articles