Hyperlink - How to disable a href button with conditional (javascript)

Question

I'm trying to disable a button only if the img src is a no logo image

at the moment I have this:

if ($('img.img-thumbnail').attr('src') == '{{asset('img/gp_no_image.png ')}}') {
  console.log('is null');
} else {
  console.log('not null');
}  

I want to disable this button when the img src is null (in my console message, because it's not really empty it's displaying a default image when logo is null)

 <a href="{{ route('template.update-favicon', [$site->id]) }}" class="btn btn-primary btn-sm favicon"> {{__('template.button.update.site_favicon')}}</a>

How can I disable the button?

My idea is disable the button and show a hint message: 'Please add a logo first' more or less so

Answer 1

Try this:

$(document).ready(function(){
  if ($('img.img-thumbnail').attr('src') == '{{asset('img/gp_no_image.png ')}}') {
    $('link').attr("disabled","on");
  } else {
    $('link').attr("disabled","off");
  }


  $('#button1').click(function(e){
    if ($('link').attr('disabled') == 'on') {
      e.preventDefault();
    }
  });
});

like this you have an attribute 'disabled' and you can do css for visual, with this script link will not be active

Answer 2

I tried with your answers but the hyperlink was working

finally, I had to change the method In laravel from get to patch in the web.php routes and change the hyperlink for a real button

my HTML

<form id="favicon-form" method="POST"
    action="{{route('template.update-favicon', [$site->id])}}">
          @csrf
    {{ method_field('PATCH') }}
       <button class="btn btn-primary btn-sm" id="button-favicon"
        type="submit">{{__('template.button.update.site_favicon')}}</button><br><br><br>
 </form>

and my javascript

if($('img.img-thumbnail').attr('src') == '{{asset('img/gp_no_image.png')}}') {
    console.log('is null');
    document.getElementById("button-favicon").disabled = true;
} else {
    console.log('not null');
}

finally it works