javascript - 如何禁用某些控件直到更新成功？

Question

我正在使用 GridView，几乎一切都工作正常。

剩下的唯一一件事是确保当我在一个文本字段中输入内容时，GridView< 中的所有其他文本字段 和提交 按钮 除了当前行之外的其他行将被禁用，直到我的更新完成。

这是我的 GridView 生成的 html 代码:

<div id="gridView">
                     <div>
        <table cellspacing="0" border="1" style="border-color:Red;border-collapse:collapse;position:absolute; top: 290px;" id="MainContent_grvIsoSearchResults" rules="all">
            <tbody><tr>
                <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>
                <td>
                                    <span style="display:inline-block;width:70px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoNum_0">222222222 </span>
                                </td><td>
                                    <span style="display:inline-block;width:200px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoOfficeName_0">My Test</span>
                                </td><td>
                                    <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvRegion_0">99</span>
                                </td><td>
                                    <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvDivision_0">11111</span>
                                </td><td>
                                    <input type="text" style="width:200px;" onclick="ResetMessage();" id="MainContent_grvIsoSearchResults_txtgvEmailAddress_0" value="mytest@google.com" name="ctl00$MainContent$grvIsoSearchResults$ctl02$txtgvEmailAddress">
                                    <input type="submit" id="MainContent_grvIsoSearchResults_btnEmailUpdate_0" value="Update" name="ctl00$MainContent$grvIsoSearchResults$ctl02$btnEmailUpdate">
                                </td>
            </tr><tr>
                <td>
                                    <span style="display:inline-block;width:70px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoNum_1">CB2222001 </span>
                                </td><td>
                                    <span style="display:inline-block;width:200px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoOfficeName_1">DENNIS PETROVIC          </span>
                                </td><td>
                                    <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvRegion_1"></span>
                                </td><td>
                                    <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvDivision_1">99801</span>
                                </td><td>
                                    <input type="text" style="width:200px;" onclick="ResetMessage();" id="MainContent_grvIsoSearchResults_txtgvEmailAddress_1" value="dennis@dlgent.com" name="ctl00$MainContent$grvIsoSearchResults$ctl03$txtgvEmailAddress">
                                    <input type="submit" id="MainContent_grvIsoSearchResults_btnEmailUpdate_1" value="Update" name="ctl00$MainContent$grvIsoSearchResults$ctl03$btnEmailUpdate">
                                </td>
            </tr><tr>
                <td>
                                    <span style="display:inline-block;width:70px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoNum_2">FT2222001 </span>
                                </td><td>
                                    <span style="display:inline-block;width:200px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvIsoOfficeName_2">DENNIS PETROVIC          </span>
                                </td><td>
                                    <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvRegion_2"></span>
                                </td><td>
                                    <span style="display:inline-block;width:50px;text-align:center" id="MainContent_grvIsoSearchResults_txtgvDivision_2">99801</span>
                                </td><td>
                                    <input type="text" style="width:200px;" onclick="ResetMessage();" id="MainContent_grvIsoSearchResults_txtgvEmailAddress_2" value="dennis@dlgent.com" name="ctl00$MainContent$grvIsoSearchResults$ctl04$txtgvEmailAddress">
                                    <input type="submit" id="MainContent_grvIsoSearchResults_btnEmailUpdate_2" value="Update" name="ctl00$MainContent$grvIsoSearchResults$ctl04$btnEmailUpdate">
                                </td>
            </tr>
        </tbody></table>
    </div>

我该怎么做？

谢谢

Answer 1

尝试下面的代码；

$(function () {
//this is based on your code only, this could be done a lot prettier if you added a custom attribute to each
// <tr> like let's say - myrownumber ... then there is no need to get a child and find rownumber on the fly, 
//an everything would be prettier; 
$('input').live("focus", function () {

    var rowId = $(this).attr('id');
    var selectedRow = rowId.substring((rowId.length - 1), rowId.length);
    $('tr').each(function () {
        //find rownum 
        var inputId = $(this).find('input').attr('id');

        if (inputId != null && typeof inputId !== "undefined") {
            var row = inputId.substring((inputId.length - 1), inputId.length);

            if (row !== selectedRow) {
                $(this).find('input').prop("disabled", true);
            }
        }
    });

});
//once again this is based on your code, this can be done more ellegantly if you implement smarter naming 
//make all buttons of same class, etc... for easier selection
$('input[type=submit]').live("click", function () {
    //submit your request and get response 
    //if response success 
    $('tr').each(function () {
        $(this).find('input').prop("disabled", false);
    });

});

});