CODEWITHSUNDEEP
jquery
Shaggie
Shaggie

Reputation: 1829

jQuery: How can i enable the disabled anchor tag

Hi i am trying to enable the disabled anchor tag based on getting REST response. I tried following:

  function enableDisableButton(data) {
  if (data.defaultStatus == true) {
      $('#setDefaultGraph').prop("disabled", true);
      $('#unsetDefaultGraph').prop("disabled", false);
  } else {
      $('#setDefaultGraph').prop("disabled", false);
      $('#unsetDefaultGraph').prop("disabled", true);
      }
  }

my HTML:

            <div class="col-lg-12" id="setDefault">
            <br />
            <a id="setDefaultGraph" class="btn btn-small btn-info" data-toggle="modal" href="#setDefaultGraphModal" name="setDefaultGraph" disabled>Set as default!</a>
            <a id="unsetDefaultGraph"  class="btn btn-small btn-info" data-toggle="modal" href="#unsetDefaultGraphModal" name="unsetDefaultGraph" disabled>Remove as default!</a>
        </div>

I have disabled the anchor tags on page load & should behave sa required on user input. But nothing is working..

Any help will always appreciated... Thanks in advance

Upvotes: 2

Views: 8730

Answers (5)

Sudhakar Singajogi
Sudhakar Singajogi

Reputation: 58

Try this if you want to disable anchor if u click it won't go anywhere, Kindly correct me if am wrong.

 if (data.defaultStatus == true) {
      $("#setDefaultGraph").attr('href','javascript:void(0)');
     }

Upvotes: 0

Sougata Bose
Sougata Bose

Reputation: 31749

Add a data property to the link depending on the condition. And on click event on the anchor tag check for that property. Try with - 

  if (data.defaultStatus == true) {
      $('#setDefaultGraph').data("disabled", true);
      $('#unsetDefaultGraph').data("disabled", false);
  } else {
      $('#setDefaultGraph').data("disabled", false);
      $('#unsetDefaultGraph').data("disabled", true);
      }
  }

Check the property on click event - 

  $('a').on('click', function(e) {
     if ($(this).data('disabled')) {
         e.preventDefault();
     }
  })

Update

If you want to stop the links from displaying modal - 

$('#setDefaultGraph').data("toggle", '').css('color', '#ccc');

add the css to look like it is disabled.

Upvotes: 2

user4741577
user4741577

Reputation:

Have you tried this:

   function enableDisableButton(data) {
     if (data.defaultStatus == true) {
         $('#setDefaultGraph').attr('disabled', true);
         $('#unsetDefaultGraph').attr('disabled', false);
         } else if(data.defaultStatus == false){
         $('#setDefaultGraph').attr('disabled', false);
         $('#unsetDefaultGraph').attr('disabled', true);
      }else{
         return false;
            }
    }

use attr instead of prop

Upvotes: 1

Shahin
Shahin

Reputation: 1475

To set an HTML objects attributes it's better to use attr just like the way you used prop. More information.

function enableDisableButton(data) {
if (data.defaultStatus == true) {
    $('#setDefaultGraph').attr("disabled", true);
    $('#unsetDefaultGraph').attr("disabled", false);
} else {
    $('#setDefaultGraph').attr("disabled", false);
    $('#unsetDefaultGraph').attr("disabled", true);
    }
}

Upvotes: 0

Rohit Arora
Rohit Arora

Reputation: 2252

Try removing it, This will surely work :

function enableDisableButton(data) {
  if (data.defaultStatus == true) {
      $('#setDefaultGraph').prop("disabled", true);
      $('#unsetDefaultGraph').removeAttr("disabled");
  } else {
      $('#setDefaultGraph').removeAttr("disabled");
      $('#unsetDefaultGraph').prop("disabled", true);
      }
  }

Upvotes: 0

Related Questions