如何禁用焦点上的特定输入字段？

Question

I have GridView that renders a table. This table has text fields and input fields.

I wrote the following jQuery to disable text fields on focus. It works fine:

$(function(){

    $('input[type="text"]').live("focus", function() {
        var rowId = $(this).attr('id');
        var inputField = $(this).attr('name');
        alert(inputField.indexOf('txtSearchValue'));
        $('tr').each(function(){
            var inputId = $(this).find('input[type="text"]').attr('id');
            var submitId = $(this).closest("tr").find('input[type="submit"]').attr('id');
            if(inputId != null && typeof inputId !== "undefined"){
                if(rowId !== inputId){               
                    $(this).find('input[type="text"]').attr("disabled", "disabled");
                    $(this).closest("tr").find('input[type="submit"]').attr("disabled","disabled");
                }
            }
        });                                
    });
});

I also have another text field that is not a part of a generated table but it also gets disabled every time I click on textfields belonging to the table.

This is a text field:

<input id="ctl00_ContentMain_txtSearchValue" type="text" value="2222" name="ctl00$ContentMain$txtSearchValue"></input>

I'm trying to use:

var inputField = $(this).attr('name'); inputField.indexOf('txtSearchValue');

to access that extra field, but I'm not sure how to combine it with my jQuery to make sure it is always enabled.

Any ideas?

How can I modify it, so, the extra field

This is my html table:

<TABLE style="POSITION: absolute; BORDER-BOTTOM-COLOR: red; BORDER-TOP-COLOR: red; BORDER-COLLAPSE: collapse; BORDER-RIGHT-COLOR: red; BORDER-LEFT-COLOR: red; TOP: 150px" id=ctl00_ContentMain_grvIsoSearchResults class=DataWebControlStyle border=1 rules=all cellSpacing=0>
<TBODY>
<TR class=HeaderStyle>
<TH scope=col>ISONUM</TH>
<TH scope=col>OFFICE NAME</TH>
<TH scope=col>REGION</TH>
<TH scope=col>DIVISION</TH>
<TH scope=col>EMAIL ADDRESS</TH></TR>
<TR class=RowStyle>
    <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 70px; DISPLAY: inline-block"  id=ctl00_ContentMain_grvIsoSearchResults_ctl02_txtgvIsoNum>222222222 </SPAN>
    </TD>
     <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 200px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl02_txtgvIsoOfficeName>Test, Eugene Test </SPAN>
     </TD>
     <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 50px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl02_txtgvRegion>99</SPAN> 
     </TD>
      <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 50px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl02_txtgvDivision>11111</SPAN> 
      </TD>
      <TD><INPUT id=ctl00_ContentMain_grvIsoSearchResults_ctl02_txtgvEmailAddress class=textInput name=ctl00$ContentMain$grvIsoSearchResults$ctl02$txtgvEmailAddress value=test@test.com> 
          <INPUT id=ctl00_ContentMain_grvIsoSearchResults_ctl02_btnEmailUpdate onclick="return ValidateEmail(this);" name=ctl00$ContentMain$grvIsoSearchResults$ctl02$btnEmailUpdate value=Update type=submit> 
      </TD>
      </TR>
      <TR class=AlternatingRowStyle>
      <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 70px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl03_txtgvIsoNum>CB2222001 </SPAN>
      </TD>
       <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 200px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl03_txtgvIsoOfficeName>DENNIS PETROVIC </SPAN>
      </TD>
      <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 50px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl03_txtgvRegion></SPAN>
      </TD>
      <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 50px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl03_txtgvDivision>99801</SPAN> 
      </TD>
       <TD>
         <INPUT id=ctl00_ContentMain_grvIsoSearchResults_ctl03_txtgvEmailAddress class=textInput name=ctl00$ContentMain$grvIsoSearchResults$ctl03$txtgvEmailAddress value=dennis@dlgent.com> 
          <INPUT id=ctl00_ContentMain_grvIsoSearchResults_ctl03_btnEmailUpdate onclick="return ValidateEmail(this);" name=ctl00$ContentMain$grvIsoSearchResults$ctl03$btnEmailUpdate value=Update type=submit>
       </TD>
    </TR>
    <TR class=RowStyle>
        <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 70px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl04_txtgvIsoNum>FT2222001 </SPAN>
       </TD>
        <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 200px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl04_txtgvIsoOfficeName>DENNIS PETROVIC </SPAN>
       </TD>
        <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 50px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl04_txtgvRegion></SPAN>
        </TD>
        <TD><SPAN style="TEXT-ALIGN: center; WIDTH: 50px; DISPLAY: inline-block" id=ctl00_ContentMain_grvIsoSearchResults_ctl04_txtgvDivision>99801</SPAN> 
       </TD>
       <TD><INPUT id=ctl00_ContentMain_grvIsoSearchResults_ctl04_txtgvEmailAddress class=textInput name=ctl00$ContentMain$grvIsoSearchResults$ctl04$txtgvEmailAddress value=dennis@dlgent.com> 
       <INPUT id=ctl00_ContentMain_grvIsoSearchResults_ctl04_btnEmailUpdate onclick="return ValidateEmail(this);" name=ctl00$ContentMain$grvIsoSearchResults$ctl04$btnEmailUpdate value=Update type=submit> 
        </TD>
     </TR>
</TBODY>
</TABLE>

Answer 1

You attach a function to all 'input[type="text"]' . This means that all the input fields on your page will have this function. You might want to check out this question.

Your query should looks something like this: table > input[type="text"] . For more details .

UPDATE

Looking at your code I am not sure your system does what you really want. Anyway, here is a filldle that gives you the fields with inputText classes from your table. Then you can attach to them a function (Just pop up the console -- in Chrome F12 and you'll see the selected elements of the page).

As I said you need to restrict your selector level by level:

$('td > .textInput').each(function(){
    console.log(this);
})

So you select all the .textInput classes from all td tags. This will work without just uwing $('.textInput') in case you don't have any other td tags. If you have multiple tables use the id of the table you want to use in the selector then descend from there to the required level.