javascript - Disable link after first click in Rails, Coffeescript - Stack Overflow

admin管理员组

文章数量:1287777

The following link should be disabled after the first click

<%= link_to "Submit Order", {:action => "charge"}, class: 'btn btn-primary', id: 'confirmButton' %>

The following code permanently disables the link:

ready = ->

$('#confirmButton').click (e) ->
  e.preventDefault()
  return

$(document).ready(ready)    
$(document).on('page:load', ready) 

How do I have to modify this code, so that the link is active on the first click and then disabled on subsequent clicks?

The following link should be disabled after the first click

<%= link_to "Submit Order", {:action => "charge"}, class: 'btn btn-primary', id: 'confirmButton' %>

The following code permanently disables the link:

ready = ->

$('#confirmButton').click (e) ->
  e.preventDefault()
  return

$(document).ready(ready)    
$(document).on('page:load', ready) 

How do I have to modify this code, so that the link is active on the first click and then disabled on subsequent clicks?

• javascript
• jquery
• ruby-on-rails
• ruby-on-rails-4
• coffeescript

Share Improve this question Follow asked May 10, 2016 at 15:52 mr. jmanmr. jman 12133 silver badges1515 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Consider using a button instead; rails' button helper supports a disabled_with data attribute that should automagically disable the button once it's been clicked.

http://api.rubyonrails/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to-label-Data+attributes

This also works for the form submit helper

http://api.rubyonrails/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag-label-Data+attributes

You can add a disabled class to the button after the first click

$('#confimationButton').on('click', function() {
  if($(this).hasClass('disabled'))
    return;
  // do work
  $(this).addClass('disabled');
});

<%= link_to "Submit Order", {:action => "charge"}, class: 'btn btn-primary', id: 'confirmButton', data: { disable_with: "Please wait..." } %>

A slight variation to Antarr Byrd's answer

$('a').on('click', '.disabled', function(){
  return false;
});

and then add the disabled class like he mentioned

Adding a class is fine if you want to change the display properties (color, etc) but doesn't actually disable the link. Apparently setting the 'disabled' property doesn't either. The solutions I've seen all have to do with setting the 'click' handler of the link to return false or stop propogation of the click action. This post is a good example:

disable a hyperlink using jQuery

本文标签： javascriptDisable link after first click in RailsCoffeescriptStack Overflow