Question

我有一个索引页面，其中有一个创建按钮。单击“创建”按钮，将打开一个名为CreateStudent的新视图查看我有多个bootstrapp选项卡。每个标签上都有一个按钮。索引视图：按钮

<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

disabled属性仅适用于<input>标记。你不能用锚来使用它会产生任何影响。

由于您正在使用引导程序，因此disabled属性将在role='button'的锚点上运行，它应该是true：

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

注意：由于您尝试禁用当前页面中不存在的元素，因此无法在当前上下文中使用。

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

Answer 2

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

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

和CSS

a.disabledLink {
  pointer-events: none;
}

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

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

编辑1：由于您说您必须禁用另一个视图但在当前视图中处理禁用内容的按钮，您可以执行此操作，设置一个变量来说明是否必须禁用该按钮，在第二个视图的页面加载时运行jquery脚本来检查该值并切换链接状态。这是一段代码片段

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

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

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

注意，保持css规则以删除上面提到的指针事件。

如何使用jquery禁用按钮

2 个答案: