超链接 - 如何禁用带有条件的 href 按钮 (javascript)

问题描述

仅当 img src 是无徽标图像时,我才尝试禁用按钮

目前我有这个:

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

当 img src 为空时,我想禁用这个按钮(在我的控制台消息中,因为它不是真的空它在 logo 为空时显示认图像)

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

如何禁用按钮?

我的想法是禁用按钮并显示提示消息:“请先添加徽标”或多或少是这样

enter image description here

解决方法

试试这个:

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

像这样你有一个'disabled'属性,你可以做可视化的css,这个脚本链接不会被激活

,

我尝试了您的答案,但超链接有效

最后,我不得不将 laravel 中的方法从 web.php 路由中的 get 改为 patch 并更改真实按钮的超链接

我的 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>

和我的 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');
}

终于成功了