Ruby on rails 有条件地禁用指向的链接

在我的Rails应用程序中，我想让人们只在输入项目标题后才能删除项目：

$('.delete_project_btn').click(function(e){
    if($(this).hasClass('disabled')){
      console.log('preventing link click');
      e.preventDefault();
    }else{

    }
  });

    $('.delete_project_text_area').blur(function(){
      if($(this).val() == <%=@project.title%>){
        $('.delete_project_btn').removeClass('disabled');
      }else{
        if(!$('.delete_project_btn').hasClass('disabled')){
          $('.delete_project_btn').addClass('disabled');  
        }
      }
    });

  <div class="modal-footer">
    <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-danger delete_project_btn disabled">Delete Project</button>
  </div>
</div>

<script type="text/javascript">

    $('.delete_project_text_area').bind('input propertychange', function(){
      if($(this).val() == "<%=@project.title%>"){
        $('.delete_project_btn').replaceWith('<%=link_to "Delete Project", @project, :method=> :delete, :class=>"btn btn-danger delete_project_btn"%>');
      }else{
        if(!$('.delete_project_btn').hasClass('disabled')){
          $('.delete_project_btn').replaceWith('<button class="btn btn-danger delete_project_btn disabled">Delete Project</button>');
        }
      }
    });
</script>

我当前的“删除按钮”链接定义如下：

   <%= link_to "Delete Project", @project, :method=> :delete, :class=>"btn btn-danger disabled delete_project_btn"%>

：delete，：class=>“btn btn危险禁用删除\u项目\u btn”%>

为什么样式工作正常，用户仍然可以单击链接，即使按钮具有禁用的类

我只希望在用户添加项目名称后才能删除该项目：

$('.delete_project_btn').click(function(e){
    if($(this).hasClass('disabled')){
      console.log('preventing link click');
      e.preventDefault();
    }else{

    }
  });

    $('.delete_project_text_area').blur(function(){
      if($(this).val() == <%=@project.title%>){
        $('.delete_project_btn').removeClass('disabled');
      }else{
        if(!$('.delete_project_btn').hasClass('disabled')){
          $('.delete_project_btn').addClass('disabled');  
        }
      }
    });

  <div class="modal-footer">
    <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-danger delete_project_btn disabled">Delete Project</button>
  </div>
</div>

<script type="text/javascript">

    $('.delete_project_text_area').bind('input propertychange', function(){
      if($(this).val() == "<%=@project.title%>"){
        $('.delete_project_btn').replaceWith('<%=link_to "Delete Project", @project, :method=> :delete, :class=>"btn btn-danger delete_project_btn"%>');
      }else{
        if(!$('.delete_project_btn').hasClass('disabled')){
          $('.delete_project_btn').replaceWith('<button class="btn btn-danger delete_project_btn disabled">Delete Project</button>');
        }
      }
    });
</script>

$（'.delete_project_btn'）。单击（函数（e）{
if（$（this）.hasClass（'disabled'））{
log（'防止链接点击'）；
e、 预防默认值（）；
}否则{
}
});
$（'.delete_project_text_area'）.blur（函数（）{
如果（$（this）.val（）=）{
$（'.delete_project_btn'）.removeClass（'disabled'）；
}否则{
如果（！$（'.delete_project_btn'）。hasClass（'disabled'））{
$（'.delete_project_btn'）.addClass（'disabled'）；
}
}
});

当我单击“删除项目”按钮而没有输入项目名称时，我可以看到日志消息“阻止链接单击”，但它仍在删除项目

---

如何有条件地禁用指向的链接？

我最终删除了指向的原始链接，并将其替换为一个虚拟按钮，仅在用户键入项目的完整标题后添加链接：

$('.delete_project_btn').click(function(e){
    if($(this).hasClass('disabled')){
      console.log('preventing link click');
      e.preventDefault();
    }else{

    }
  });

    $('.delete_project_text_area').blur(function(){
      if($(this).val() == <%=@project.title%>){
        $('.delete_project_btn').removeClass('disabled');
      }else{
        if(!$('.delete_project_btn').hasClass('disabled')){
          $('.delete_project_btn').addClass('disabled');  
        }
      }
    });

  <div class="modal-footer">
    <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-danger delete_project_btn disabled">Delete Project</button>
  </div>
</div>

<script type="text/javascript">

    $('.delete_project_text_area').bind('input propertychange', function(){
      if($(this).val() == "<%=@project.title%>"){
        $('.delete_project_btn').replaceWith('<%=link_to "Delete Project", @project, :method=> :delete, :class=>"btn btn-danger delete_project_btn"%>');
      }else{
        if(!$('.delete_project_btn').hasClass('disabled')){
          $('.delete_project_btn').replaceWith('<button class="btn btn-danger delete_project_btn disabled">Delete Project</button>');
        }
      }
    });
</script>

取消
删除项目
$（'.delete_project_text_area'）.bind（'InputPropertyChange'，function（）{
if（$（this）.val（）==“”）{
$（'.delete_project_btn'）。替换为（':delete，：class=>“btn btn danger delete_project_btn”%>）；
}否则{
如果（！$（'.delete_project_btn'）。hasClass（'disabled'））{
$（'.delete_project_btn'）。替换为（'delete project'）；
}
}
});

我最终删除了指向的原始链接，并将其替换为一个虚拟按钮，仅在用户键入项目的完整标题后添加链接：

$('.delete_project_btn').click(function(e){
    if($(this).hasClass('disabled')){
      console.log('preventing link click');
      e.preventDefault();
    }else{

    }
  });

    $('.delete_project_text_area').blur(function(){
      if($(this).val() == <%=@project.title%>){
        $('.delete_project_btn').removeClass('disabled');
      }else{
        if(!$('.delete_project_btn').hasClass('disabled')){
          $('.delete_project_btn').addClass('disabled');  
        }
      }
    });

  <div class="modal-footer">
    <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-danger delete_project_btn disabled">Delete Project</button>
  </div>
</div>

<script type="text/javascript">

    $('.delete_project_text_area').bind('input propertychange', function(){
      if($(this).val() == "<%=@project.title%>"){
        $('.delete_project_btn').replaceWith('<%=link_to "Delete Project", @project, :method=> :delete, :class=>"btn btn-danger delete_project_btn"%>');
      }else{
        if(!$('.delete_project_btn').hasClass('disabled')){
          $('.delete_project_btn').replaceWith('<button class="btn btn-danger delete_project_btn disabled">Delete Project</button>');
        }
      }
    });
</script>

取消
删除项目
$（'.delete_project_text_area'）.bind（'InputPropertyChange'，function（）{
if（$（this）.val（）==“”）{
$（'.delete_project_btn'）。替换为（':delete，：class=>“btn btn danger delete_project_btn”%>）；
}否则{
如果（！$（'.delete_project_btn'）。hasClass（'disabled'））{
$（'.delete_project_btn'）。替换为（'delete project'）；
}
}
});

为了更好的衡量，您是否也尝试过执行

返回false在
e.preventDefault（）之后？为了更好的衡量，您是否也尝试过执行
返回false在
e.preventDefault（）之后？