Question

我的MVC视图中有一个Razor foreach循环，它将生成许多包含按钮的表行：

nullif(dif_tradecount - 1, 0) as missed_messages

我想禁用单击按钮并显示加载微调器，但是这与我的方式不起作用。（只有一个按钮时，它可以在我的其他页面上使用）

这是我的脚本：

 @foreach (var item in Model)
            {
                <tr>
                    <td>@item.Id</td>
                    <td>
                        <button id="btn" class="button btn-primary" type="button" onclick="location.href='@Url.Action("RunSingleTest", "Home", new {testName=@item.Test_type, id=@item.Id})'"> Run Test</button>
                        <img id="loading" src="img/ajax-loader.gif" alt="" style="display:none;" />
                    </td>
                </tr>
            }

如何使其在foreach中起作用？

Answer 1

不要使用id，而要使用class。 $('#btn')将仅返回具有该ID的第一个元素，即使还有更多。

Answer 2

具有多个具有相同ID的按钮（或任何其他HTML元素）不是有效的HTML。 ID应该是元素的唯一标识符-毕竟，如果不是，ID将不再适合调用“ ID”！

因此，您的“点击”处理程序将永远只绑定到具有该ID的第一个元素。 JavaScript只希望有一个匹配的元素，甚至不会考虑所有其他元素。

您需要改用类：

$('.button').click(function () {

将使用“按钮” CSS类绑定到所有按钮。

然后您可以使用$(this)来按住当前按钮。您需要遍历DOM以获得最接近的“加载”元素（还需要使用ca类而不是ID）。

此外，您应该使用.prop()来设置“已禁用”的属性（请注意，不是属性！），而不是此处记录的.attr()：http://api.jquery.com/attr/ < / p>

如果将所有这些加在一起，我们将得到类似的东西：

$(function () {
    $('.button').click(function () {
        $(this).prop("disabled", true);
        $(this).siblings('.loading').show();
    });
});

在jQuery中，

@foreach (var item in Model)
{
    <tr>
        <td>@item.Id</td>
        <td>
            <button class="button btn-primary" type="button"> Run Test</button>
            <img class="loading" src="img/ajax-loader.gif" alt="" style="display:none;" />
        </td>
    </tr>
}

在代码中，顺便说一句，您似乎有一个jQuery“ click”函数和一个内联“ onclick”事件处理程序。从可维护性的角度来看，这是不好的-最好选择一种样式并坚持下去。同样，由于您的“ onclick”将用户导航到另一个页面，因此您在jQuery处理程序中所做的所有其他更改在任何情况下都会立即丢失。在上面的示例中，我已将其删除，因为目前尚不清楚目的是什么，或者是否需要。

Answer 3

确保元素的ID是唯一的。根据html标准，您不能重复使用ID。

我稍微修改了您的代码以使其符合代码片段的要求，并使其工作更好。

使用prop()代替attr()，因为它对属性的支持要好得多。
在循环的id中添加了一个迭代编号。
将类添加到了jQuery / Css常用选择器的加载元素中
使用了$(this)选择器来获取当前单击的按钮。因此，必须使用sublings()函数来获取相应的<img>元素。

$(document).ready(function() {
    $('.button').on('click', function () {
        $(this).prop("disabled", true);
        $(this).siblings('.loading').show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>
      <button id="btn1" class="button btn-primary" type="button"> Run Test</button>
      <img id="loading1" class="loading" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" style="display:none;" />
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <button id="btn2" class="button btn-primary" type="button"> Run Test</button>
      <img id="loading2" class="loading" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" style="display:none;" />
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>
      <button id="btn3" class="button btn-primary" type="button"> Run Test</button>
      <img id="loading3" class="loading" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" style="display:none;" />
    </td>
  </tr>
</table>

Answer 4

尝试以下代码以禁用该按钮。

   $(function () {
        $('#btn').click(function () {
            $(this).prop("disabled",true);
            $('#loading').show();
        });
    });

Answer 5

您仍然可以通过按钮的ID触发它，但是必须通过以下方式完成：

$('[id^=btn]').click(function () {
    $(this).prop("disabled", "true");
    $(this).siblings('#loading').show();
});

这将允许单个按钮在单击时被禁用，并且仅显示与单击按钮有关的图像。

使用jQuery禁用多个按钮

5 个答案: