は条件付きで、私は彼らがプロジェクトのタイトルに入力しただけで後はプロジェクトを削除するには、人々を有効にしたい私のRailsアプリでのlink_to

Question

を無効にします

<%= link_to "Delete Project", @project, :method=> :delete, :class=>"btn btn-danger disabled delete_project_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'); 
     } 
     } 
    }); 

私は、私がクリックしたときに、「リンクのクリックを防止する」ログメッセージを見ることができていますプロジェクトの名前を入力せずに「プロジェクトの削除」ボタンをクリックしますが、それでもプロジェクトは削除されています。

どうすれば条件付きでリンクを無効にできますか？

Answer 1

私は、元のlink_toを削除してしまったとダミーボタンでそれを置き換える、ユーザーはプロジェクトの完全なタイトル入力した後にのみ、リンクを追加：良い対策について

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