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属性（它只适用于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/

以下原始答案

您可以使用布尔表达式有条件地设置disabled属性。对于真实属性（不是普通属性），最好使用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);

菊花链addClass和removeatt，Jquery

1 个答案: