0

I am trying to make a on/off button for a form. The button's style depends on the checkbox's value (checked/not-checked) and the checkbox itself is hidden. I know you can use css to govern the style (like the label button's colour). Is there any way I can also change its parents' style?

HAML (RoR):

%label.primary_btn
  set as primary
  = f.check_box :is_on, style: 'display:none;'

HTML:

<label class="primary_btn">
    On/Off Button
        <input name="post[images_attributes][0][is_on]" type="hidden" value="0"><input id="post_images_attributes_0_is_on" style="display:none;" type="checkbox" value="1">
</label>

CSS:

.primary_btn {
  float: left;
  clear: both;
  padding: 6px 10px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
  color: white;
  box-shadow: black 0px 1px 4px -1px;
  cursor: pointer;
  background-color: #6d6d6d;
}

Addition comment: I can't use 'for' in label because I cannot call the id of the nested field :is_on. Thanks!

Quin
  • 513
  • 5
  • 20
  • See what can be done here http://stackoverflow.com/questions/30663562/use-images-like-checkboxes/ – jcuenod Jun 23 '15 at 13:19
  • Thanks @jcuenod, the reason why I can't use that solution is the app is written in RoR and I can't get the nested_form library to provide the 'for' setting the in label tag.. – Quin Jun 23 '15 at 14:49
  • I'm curious why this doesn't work for you: http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-label_tag – jcuenod Jun 23 '15 at 14:52
  • Hi @jcuenod, Thanks for sending that through! It's a nested attribute so I do not know how to generate the `id` for that field. – Quin Jun 23 '15 at 14:56
  • Probably better to figure that out than find some workaround. – jcuenod Jun 23 '15 at 14:58

2 Answers2

1

If you change your html a bit, so that the label is a sibling of an input (and just after it), i.e.:

<input type="checkbox" id="c1" />
<label for="c1">Some label</label>

it's easy to achieve with css only, e.g.:

input[type=checkbox]:not(:checked) + label {color: gray}
input[type=checkbox]:checked + label {color: blue}
Tomek Sułkowski
  • 7,081
  • 2
  • 17
  • 15
  • The input is child element of the label, so it is not possible to select only with css (css cannot select parent element) – kapantzak Jun 23 '15 at 13:24
  • You're right, that why I suggested **changing his html** a bit. It that's an option, it'd be easier and more failproof. – Tomek Sułkowski Jun 23 '15 at 13:25
  • Thanks @TomekSułkowski for the answer! What if I cannot use 'for' in the label? The app is in RoR and I can't set the 'for' attribute of the label. Sorry, I should have put it more clearly. – Quin Jun 23 '15 at 14:51
  • @Quin this has to be available in RoR as well as it is quite essential part of html form. From what I see here http://apidock.com/rails/ActionView/Helpers/FormTagHelper/label_tag it seems the first param to `label_tag` is in fact used as its `for` attribute. – Tomek Sułkowski Jun 23 '15 at 15:36
  • @TomekSułkowski, Yes, I think so. But because it is a nested form so if I use this, it will generate a wrong id.. I have also put a `label_tag` question so hopefully I can user `for` to solve this. – Quin Jun 23 '15 at 16:04
  • @TomekSułkowski, Finally found the bug in my code. I can now generate the `for` attribute from rails! Thanks! – Quin Jun 23 '15 at 16:27
0

Check on load and every time the checkbox changes:

var labelStyle = function(elem) {
   var lb = elem.closest('label');
   if (elem.is(':checked')) {
      lb.removeClass('label-unchecked').addClass('label-checked');
   } else {
      lb.removeClass('label-checked').addClass('label-unchecked');
   }
}

$(window).load(function() {
   labelStyle($('#post_images_attributes_0_is_on'));
});

$('#post_images_attributes_0_is_on').on('change', function() {
   labelStyle($(this));
});
kapantzak
  • 11,610
  • 4
  • 39
  • 61