如何使用jquery禁用按钮[重复]

Question

我有一个索引页面，其中有一个创建按钮。单击创建按钮时，它会打开一个名为CreateStudent 的新视图，其中我有多个引导程序选项卡。每个选项卡上都包含一个按钮。 索引视图：按钮

<div class="row">
    <div class="col-md-6 text-right"><a class="btn btn-default CreateMe" href="/MyProject/StaffCreate" role="button">Create New</a></div>
</div>

CreateStudent 视图在其中一个选项卡上有一个按钮 LogOnAdd：

<div class="row">
    <div class="col-md-8 text-right">
        <a class="btn btn-default LogonAdd" id="LogonAdd" href="#" role="button">Add </a>
    </div>
</div>

使用下面的 jquery 我试图禁用 LogOnAdd 按钮。

$('.CreateMe').click(function () {
    $(".LogonAdd").attr("disabled", true);
});

但上面的 jquery 代码不起作用。该按钮没有被禁用。有人可以指导我在 jquery 中犯了什么错误。

我正在使用 vs 2010 和 mvc4 。

我怀疑它是否找不到控件。

Answer 1

试试这个，当你想禁用它时，在你的锚标签中添加一个类，在 css 中你可以设置鼠标事件对它不做任何事情，这里

$('.CreateMe').click(function () {
    $('.LogonAdd').addClass('disabledLink');
});

还有 CSS

a.disabledLink {
  pointer-events: none;
}

要再次启用链接，只需删除该类。

$('.LogonAdd').removeClass('disabledLink');

编辑 1： 既然您说您必须禁用另一个视图的按钮，但要处理当前视图中的禁用内容，您可以这样做， 设置一个变量来说明按钮是否必须被禁用，在第二个视图的页面加载时运行 jquery 脚本来检查这个值并切换链接状态。这是一个代码sn-p

$('.CreateMe').click(function () {
  localStorage.setItem('disableLogOnAdd', true); //set
});

在第二页的文档就绪事件上执行此操作，

if(localStorage.getItem('disableLogOnAdd')){
  $('.LogonAdd').addClass('disabledLink');
}

注意，如前所述，保持css规则移除指针事件。

Answer 2

disabled 属性仅适用于 <input> 标记。你不能将它与锚一起使用它不会产生任何效果。

由于您使用的是引导程序，因此 disabled 属性将适用于带有 role='button' 的锚点，它应该是 true ：

$('.LogonAdd').attr("disabled","true"); 
//OR
$('.LogonAdd').attr("disabled","disabled");

注意：这在您当前的上下文中不起作用，因为您尝试禁用不在当前页面中的元素。

因此，如果我真的了解其他按钮位于同一页面中，只是位于不同的选项卡中。如果是这种情况，您可以默认禁用其他选项卡中的按钮（在 html 代码中），然后在单击第一个选项卡中的保存按钮时启用它们。