CODEWITHSUNDEEP
javascriptjquery
MikeF
MikeF

Reputation: 477

jQuery if this is disabled - not working

I need to check whether a selector is disabled on click.

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

My current code, that isn't working, is:

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

I have also attempted $('.sendOrderToSage:not(:disabled)')..... but that yeilds the same result as the above attempt.

Upvotes: 0

Views: 2442

Answers (2)

rrk
rrk

Reputation: 15846

disabled attribute/property is valid for elements such as input,select etc. In an anchor tag disabled is just another attribute. So if you want to get it, you need to use attr()

$('.sendOrderToSage').on('click', function(e) {
  e.preventDefault();
  if ($(this).attr('disabled') == 'disabled') {
    return false;
  }
  /* Continue function */
});
<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>

With :disabled

Here the return of $(this).is(':disabled') for a <a> will always be false because it is an invalid attribute for an anchor. 

$('.sendOrderToSage').on('click mousedown', function(e) {
  e.preventDefault();
  alert($(this).is(':disabled'));
  if ($(this).attr('disabled') == 'disabled') {
    return false;
  }
  /* Continue function */
});
<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">This will always return false.</a><br/>

Upvotes: 5

T.J. Crowder
T.J. Crowder

Reputation: 1074295

The problem with your code is that a elements can't be disabled. disabled is an invalid attribute for a elements.

If you want to have an attribute on an a element that indicates that it should not be clickable, your only valid HTML option is to use a data-* attribute instead. Then you can "disable" it with:

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

and "enable" it with:

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

and your click function becomes:

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

Live Example:

$('.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");
  }
});
<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>

Upvotes: 2

Related Questions