Javascript/Jquery function to disable table row based on child element content

Question

I have a table and in every row I have a cell (Example, for first row: (id: ctl00_MainContent_grdSearch_i0_c5). I need to check if this cell has value 1 then disable its row (i.e. ctl00_MainContent_grdSearch_i0 in above case).

(id: ctl00_MainContent_grdSearch_itemsHolder)

row (id: ctl00_MainContent_grdSearch_i0)
row (id: ctl00_MainContent_grdSearch_i1)
row (id: ctl00_MainContent_grdSearch_i2)

What have you tried so far? Please post some actual code and any relevant HTML. — Bojangles
– Bojangles, Commented Dec 19, 2011 at 17:03
what is the "table" ? HTML ? and what are you trying to disable ? an input / anchor ? — Manse
– Manse, Commented Dec 19, 2011 at 17:03
What do you mean by disable the row? Do you want to disable all controls in a particular row if a particular cell has a value of 1? — Abbas
– Abbas, Commented Dec 19, 2011 at 17:04
@ManseUK It's an asp.net gridview but as it is rendered it appears as a html <div> table in browser. — Zerotoinfinity
– Zerotoinfinity, Commented Dec 19, 2011 at 17:05
Well if it was working, you wouldn't be asking a question about it. Please add more detail to your question instead of repeating yourself in comments. — Bojangles
– Bojangles, Commented Dec 19, 2011 at 17:08

ThinkingStiff · Accepted Answer · 2012-11-22 18:20:30Z

You can use a single line to do this with the :contains() selector. This example is assuming you're using div elements the way you described in comments.

$( "#ctl00_MainContent_grdSearch_itemsHolder > div:contains(1)" )
    .attr( "disabled", "disabled");

If your HTML is a more complicated, you might want to be more specific and use the this line instead:

$( "#ctl00_MainContent_grdSearch_itemsHolder > div[id^=ctl00_MainContent_grdSearch_i]:contains(1)" )
    .attr( "disabled", "disabled");

The first line finds any div under your itemsHolder div with the value of 1. The second line only finds div elements with the id starting with ctl00_MainContent_grdSearch_i that have the value of 1.

In this demo I set background-color: gray; for the disabled rows so you could see them.

Demo: http://jsfiddle.net/ThinkingStiff/MULSv/

HTML:

<div id="ctl00_MainContent_grdSearch_itemsHolder">
    <div id="ctl00_MainContent_grdSearch_i0">
        <div id="ctl00_MainContent_grdSearch_i0_c0" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i0_c1" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i0_c2" class="item">0</div>
    </div>
    <div id="ctl00_MainContent_grdSearch_i1">
        <div id="ctl00_MainContent_grdSearch_i1_c0" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i1_c1" class="item">1</div>
        <div id="ctl00_MainContent_grdSearch_i1_c2" class="item">0</div>
    </div>
    <div id="ctl00_MainContent_grdSearch_i2">
        <div id="ctl00_MainContent_grdSearch_i2_c0" class="item">1</div>
        <div id="ctl00_MainContent_grdSearch_i2_c1" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i2_c2" class="item">0</div>
    </div>
    <div id="ctl00_MainContent_grdSearch_i3">
        <div id="ctl00_MainContent_grdSearch_i3_c0" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i3_c1" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i3_c2" class="item">0</div>
    </div>
</div>

CSS:

.item {
    display: inline-block; 
}

Script:

$( "#ctl00_MainContent_grdSearch_itemsHolder > div:contains(1)" )
    .attr( "disabled", "disabled").css( "background-color", "gray" );

Output:

enter image description here

Rich O'Kelly · Accepted Answer · 2011-12-19 17:07:19Z

2

Try the following:

$('tr').find('td[id^="ctl00_MainContent_grdSearch"]').each(function() {
  var self = $(this);
  if (self.text() === '1') {
    self.closest('tr').attr('disabled', 'disabled');
  }
});

answered Dec 19, 2011 at 17:07

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

6 Comments

Zerotoinfinity Over a year ago

Thanks a lot for your guidance but I noticed that it is comming in <div> instead of table :-( is this going to effect ?

Rich O'Kelly Over a year ago

@Zerotoinfinite Yes, it will have an effect. Please post the HTML that you wish to manipulate and I'll update accordingly.

Zerotoinfinity Over a year ago

it is like this <div id="ctl00_MainContent_grdSearch_i0" <div id=" ctl00_MainContent_grdSearch_itemsHolder" and <div id=" ctl00_MainContent_grdSearch_i0_c6"

Zerotoinfinity Over a year ago

I think I have confused you.. it is like foreach div in ctl00_MainContent_grdSearch_itemsHolder (this will get me the row inside the ctl00_MainContent_grdSearch_itemsHolder)

Zerotoinfinity Over a year ago

and foreach inside the above foreach, i.e. for each row ctl00_MainContent_grdSearch_i0 we need to find items, and based on the control text tl00_MainContent_grdSearch_i0_c6 we need to make complete row [i.e. ctl00_MainContent_grdSearch_i0] disabled

|

nickytonline · Accepted Answer · 2011-12-22 13:53:14Z

1

You said the table was really divs, so this works. See the fiddle here, http://jsfiddle.net/nickyt/XVttD

var rows = $("div[id*='MainContent_grdSearch_i0_c']");

rows.each(function() {
    var row = $(this);

    if (row.text() === "1") {
        row.attr('disabled', 'disabled');
    }
});

edited Dec 22, 2011 at 13:53

answered Dec 19, 2011 at 18:00

nickytonline

6,9797 gold badges47 silver badges76 bronze badges

Collectives™ on Stack Overflow

Javascript/Jquery function to disable table row based on child element content

3 Answers 3

HTML:

CSS:

Script:

Output:

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

HTML:

CSS:

Script:

Output:

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related