javascript - 菊花链addClass和removeatt，Jquery

Question

因此，我有以下查询，它确定 JSON 对象的值，并相应地设置 Jquery 面板 css。

$('#pnlMissing').addClass((msg.d['MissingMessagesCount'] == "0") ? "panel-success" : "panel-danger");

我想尝试一点聪明，并禁用作为整个面板一部分的超链接..

<div id="pnlMissing" class="panel">
  <div class="panel-heading">
    <h3 class="panel-title">Missing</h3>
    <span class="pull-right clickable" data-toggle="tooltip" data-original-stitle="Toggle Missing"><i class="glyphicon glyphicon-chevron-up"></i></span>
  </div>
  <div class="panel-body">
    <a id="lnkMissingMessages" href="#"><span id="missingCount"></span></a>
  </div>
</div>

如果条件逻辑是 if/else，我知道如何禁用超链接，但不是用这个速记符号，我想使用它，因为它很干净。

所以，我的问题是，如果上述 addClass 逻辑为真，我怎样才能禁用超链接？

Answer 1

更新:IE 似乎不支持 disabled anchor 的属性(并且仅适用于 HTML5 浏览器)。

您需要使用点击处理程序和 e.preventdefault() 来禁用点击。这意味着您想要的链接将无法工作(如果没有自定义 jQuery 扩展)。

自定义 jQuery 方法示例:

$.fn.disableLink = function(disable){
    // Turn off click and style
    this.off('click').css({'text-decoration': ''});
    if (disabled){
        // Enable click handler and style out underline
        this.on('click', function(e){
            e.preventDefault();
        }).css({'text-decoration': 'none'});
    }
}

并与使用

 .find('a').disableLink(msg.d['MissingMessagesCount'] == "0");

JSFiddle: http://jsfiddle.net/TrueBlueAussie/x0jo1L1o/2/

<小时/>

原始答案如下

您可以使用 bool 表达式有条件地设置禁用属性。对于真实属性(不是普通属性)，最好始终使用 prop而不是attr 。这还有一个额外的好处，您可以使用 boolean值(这对属性值更有意义):

   .find('a').prop('disabled', (msg.d['MissingMessagesCount'] == "0"));

所以在你的例子中是这样的:

   $('#pnlMissing').addClass((msg.d['MissingMessagesCount'] == "0") ? "panel-success" : "panel-danger").find('a').prop('disabled', (msg.d['MissingMessagesCount'] == "0"));

为了清楚/简洁，我总是会像这样计算一次表达式:

  var disabled = msg.d['MissingMessagesCount'] == "0";
  $('#pnlMissing').addClass(disabled ? "panel-success" : "panel-danger").find('a').prop('disabled', disabled);