Simple_form: Disable and Readonly attributes not working properly for Selects

[aalvrz]

I am using Simple Form with Bootstrap. I have the following select field:

= f.association :judge, collection: User.judges, label_method: :full_name, value_method: :id, required: true, disabled: true, selected: current_user.id

When using disabled: true, the input is indeed disabled. But when submitting the form, its value is not passed to the controller, even when I have pre-selected a value already as shown above. The input actually shows this value in the input.

Moreover, when using the readonly: true attribute instead. The value is passed to the controller, but it can be changed from the select field, even when it appears to be disabled. Defeating the whole purpose of a read-only input.

[shootingfly]

@BigChief45
It is not the issue of simple_form, just because HTML doesn't support.
Solution 1

<%= f.input :gender, disabled: true, collection: gender_value = enum_collection(User.genders), include_blank: "select your sex" %>
<%= f.input :gender, as: :hidden, input_html: {value: gender_value[0][0]} %>

Solution 2

<% 
cannot_select = {
  onfocus: "this.defaultIndex=this.selectedIndex;",
  onchange: "this.selectedIndex=this.defaultIndex;"
} 
%>
<%= f.input :gender, readonly: true, collection:  enum_collection(User.genders), include_blank: "select your sex", input_html: {}.merge(cannot_select) %>

Other Solutions ……

[aalvrz]

@shootingfly Thank you. I think I figured it out soon after. Closing.

[jaswinder-proptiger]

@shootingfly is it possible to use readonly: true conditional. Please let me know if you have any idea.

[pavan-itd]

You can use CSS to mimic the disabled property.
Just create the class and add it conditionally.

.disable {
  pointer-events:none;background: #f2f2f2;
}