CODEWITHSUNDEEP
javascriptjqueryhtml
itsme
itsme

Reputation: 400

Disabling Fav icon click is not working in jquery

I Have a table in that two fa-icon buttons like plus and remove button inside href tag.Now I am checking the duplicate name for one column using blur it is working fine when name already exits i am going to disable the the icon not clickable in success function.Name is not there enabling it.It was working for button but icons it is not working why.Please Any help me.Below is my tried code.Thanks In Advance.

My HTML

 <div class="txtcbt" style="float:left;width:4%;">
    <a id="add" href="#"><i class="fa fa-plus" style="width:40%;font-size:25px;color:white;background-color:#dc143c;"></i></a>
  </div>

This is Jquery code for Enabling and disabling not working

success:function(response){
        var data = $.parseJSON(response);
          if(data==true){
          //if name is there it showing alert message but disabling is not working
           alert("vendor contact name already exits");
           $('.txtcbt #add .fa fa-plus').prop('disabled', true);
         }else{
            $('.txtcbt #add .fa fa-plus').prop('disabled', false);
         }
      }

Upvotes: 0

Views: 490

Answers (3)

D. Surendar
D. Surendar

Reputation: 74

There is no disable attribute for a tag. so add this in your css file. 

<style>
    a.disabled {
       pointer-events: none;
       cursor: default;
    }
        </style>

Do this in your Script

success:function(response)
{
    var data = $.parseJSON(response);
    if(data==true)
    {
        //if name is there it showing alert message but disabling is not working
        alert("vendor contact name already exits");
        $('#add').attr('class', 'disabled');
    }
    else
    {
        $('#add').attr('class', '');
    }
}

Upvotes: 1

Muhammed Fayaz
Muhammed Fayaz

Reputation: 55

for enabling $('#add.fa-plus').prop('disabled', false);

and for disable $('#add.fa-plus').prop('disabled', true);

If you want to change fa icon from fa-plus. you can use addClass and removeClass

Upvotes: 0

D. Surendar
D. Surendar

Reputation: 74

I Hope this will helpful

success:function(response)
{
    var data = $.parseJSON(response);
    if(data==true)
    {
        //if name is there it showing alert message but disabling is not working
        alert("vendor contact name already exits");
        $('#add').attr('disabled', true);
    }
    else
    {
        $('#add').attr('disabled', false);
    }
}

Upvotes: 0

Related Questions