Conditionally set the disabled state of a bootstrap button

Question

I have the following button in my view:

<button type="button" class="btn btn-lg btn-primary">Primary button</button>

I want to add the disabled property to it if and only a certain condition is true. How do I this in an elegant way?

Ropeney · Answer 1 · 2016-07-05T07:32:01.413

9

You could use the rails helper button_tag with a boolean check

<%= button_tag "Primary button", class: 'btn btn-lg btn-primary', 
  disabled: condition_check_method %>

edited Jul 05 '16 at 07:32

answered Jul 05 '16 at 06:44

Ropeney

1,065
8
10

score 2 · Accepted Answer · answered Jul 05 '16 at 06:46

You Should do this two or more way:

<button type="button" class="your-class btn btn-lg btn-primary">Primary button</button>

<script type="text/javascript">
  $(function(){
    if(Condition){
      $('.your-class').addClass('disabled');
    }
  });
</script>

OR
In The rails term 

<button type="button" class="btn btn-lg btn-primary <%= conditon ? "disabled" : ""%>">Primary button</button>

score 2 · Answer 3 · edited May 23 '17 at 11:52

2

@Ropeney's way is the RoR way, but here's another solution:

<% #some condition %>
<% foo == bar ? ( disabled = "disabled") : (disabled = "") %>

<!-- insert "disabled" or "" (empty string) in the markup -->
<button type="button" class="btn btn-lg btn-primary" <%= disabled %> >Primary button</button>

Note: we can use only disabled in HTML5 - Correct value for disabled attribute

edited May 23 '17 at 11:52

Community

1
1

answered Jul 05 '16 at 06:48

Vucko

20,555
10
56
107

score 0 · Answer 4 · answered Jul 05 '16 at 06:51

I think this may work for you

<button type="button" class="btn btn-lg btn-primary" disabled="<%= @check_condition ? 'disabled' : '' %>">Primary button</button>

or

<button type="button" class="btn btn-lg btn-primary" <%= @check_condition ? 'disabled' : '' %>">Primary button</button>

Conditionally set the disabled state of a bootstrap button

4 Answers4