How can I add 'disabled' as a class on the label? about ember-radio-button HOT 10 CLOSED

Okay, I just pushed a new commit over the old one with it working. All I needed to do was add 'disabled' to the classNameBindings in the labeled-radio-button.js.

I've added a test for it as well.

As for a general strategy for altering classes on the label, I'm not sure! It would be handy though.

from ember-radio-button.

I'm definitely interested in having a clean way for users to control what classes show up on the label (and even the input element) in different disabled and other states.

I'm curious why what you attempted first did not work... it sounds like it should have. Asking people to modify the wrapInLabel... method is not a good answer to this request.

Let's discuss and see if we can think of a direction to take this.

from ember-radio-button.

Here's my fork, the latest commit shows what I added. https://github.com/Allovue/ember-radio-button

from ember-radio-button.

I have just run into this problem. I don't want the normal 'round' radio buttons, but instead each radio button is a styled label that has an on/off style change. The radio-button itself is set to display:hidden. It works great except for the fact that I cannot provide a class directly to the label.

It seems that whenever this component builds a radio with a label, the label class is always fixed to:

class="ember-view ember-radio-button"

Would adding a labelClass property work? Just like the radioClass does?

from ember-radio-button.

A workaround I have managed for now is to use this idea from the readme:

"When radioId is specified, the label tag's for attribute will also use it."

So I specify the radioId using a bound attribute from the model, which then gives that same value to the label.

Then I can target the label when it is 'checked' like this:

label[for=<my value>].checked {
  background-color: red;
}

It means that I need to target all the labels for each of the possible values, which is somewhat hacky. It would be better if we could just target the checked labels, by using labelClass=x.

from ember-radio-button.

@rmcsharry We would welcome a PR supporting labelClass

from ember-radio-button.

I wanted to do this too, and was thinking I'd have to buckle down and learn about writing add-ons so I could create a PR, but isn't the goal accomplished by just using the non-block form of radio-button and wrapping it with an actual HTML label?

<label class="btn btn-default">
   {{radio-button
       value="Green"
       groupValue="status"
       changed="changeStatus"}}
    Green
</label>

from ember-radio-button.

@jdhines I think I agree with you but not sure what that code snippet is showing

from ember-radio-button.

@raycohen just showing that if you need a label around the radio with a class, just use an HTML <label> rather than using the block format of radio-button. Silly obvious now that I think about it; I just get tunnel-vision sometimes as I'm still trying to find my way with Ember.

from ember-radio-button.

Closing as I believe updates to the README help show that you can use the non-block form of radio-button, and then you can have full control over your own label element

from ember-radio-button.