jQuery如果禁用它 - 不工作

Question

我需要检查选择器是否在点击时被禁用。

<a href="#" class="btn btn-primary sendOrderToSage" data-id="97" disabled="disabled">Send To Sage</a>

我目前无法使用的代码是：

$('.sendOrderToSage').on('click',function(e){
    e.preventDefault();
    if($(this).is(':disabled') == true){
        return false;
    }
 /* Continue function */
 });

我也尝试过$('.sendOrderToSage:not(:disabled)').....，但结果与上述尝试相同。

Answer 1

disabled属性/属性对input,select等元素有效。 在锚标记disabled中只是另一个属性。因此，如果您想获得它，则需要使用 attr()

＆＃13;

＆＃13;

$('.sendOrderToSage').on('click', function(e) {
  e.preventDefault();
  if ($(this).attr('disabled') == 'disabled') {
    return false;
  }
  /* Continue function */
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#" class="btn btn-primary sendOrderToSage" data-id="97" disabled="disabled">Send To Sage</a>

＆＃13;

＆＃13;

＆＃13;

使用:disabled

此处$(this).is(':disabled')的{​​{1}}返回始终为false，因为它是锚的无效属性。

＆＃13;

＆＃13;

<a>

＆＃13;

$('.sendOrderToSage').on('click mousedown', function(e) {
  e.preventDefault();
  alert($(this).is(':disabled'));
  if ($(this).attr('disabled') == 'disabled') {
    return false;
  }
  /* Continue function */
});

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的代码存在的问题是a个元素can't be disabled。 disabled是a elements的无效属性。

如果您希望a元素上有一个属性，表明它不应该是可点击的，那么您唯一有效的HTML选项就是使用data-* attribute。然后你可以＆＃34;禁用＆＃34;它与：

$(".sendOrderToSage").attr("data-disabled", "Y");

和＆＃34;启用＆＃34;它与：

$(".sendOrderToSage").removeAttr("data-disabled");

，您的点击功能变为：

$('.sendOrderToSage').on('click', function(e) {
  e.preventDefault();
  if ($(this).attr('data-disabled')) {
    return false;
  }
  /* Continue function */
});

直播示例：

＆＃13;

＆＃13;

$('.sendOrderToSage').on('click', function(e) {
  e.preventDefault();
  if ($(this).attr('data-disabled')) {
    alert("Click was stopped");
    return false;
  }
  /* Continue function */
});
$(document.body).on("click", "a.sendOrderToSage", function() {
  alert("Click was not stopped");
});
$("#togglebox").on("click", function() {
  if (this.checked) {
    $(".sendOrderToSage").attr("data-disabled", "Y");
  } else {
    $(".sendOrderToSage").removeAttr("data-disabled");
  }
});

＆＃13;

<div>
  <label>
    <input type="checkbox" id="togglebox" checked>Disable the link
  </label>
</div>
<a href="#" class="btn btn-primary sendOrderToSage" data-id="97" data-disabled="disabled">Send To Sage</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;