Grey out div from toggle switch

Question

I am trying to to grey out a div based on whether a toggle is active(checked) or not. The js seems to be triggering when I select the toggle though the div isn't being faded out

Slim Template

- @products.each do |product|
    .mdl-cell.mdl-cell--4-col.item-border.mdl-shadow--2dp
      .mdl-cell.mdl-cell--1-col.mdl-cell--10-offset
        label.mdl-switch.mdl-js-switch.mdl-js-ripple-effect for=product.name
          input.mdl-switch__input checked="checked" type="checkbox" id=product.name /
          span.mdl-switch__label
      .mdl-cell.mdl-cell--12-col
        h4.teal-heading= product.name
      - @properties.each do |property|
        .mdl-cell.mdl-cell--12-col
          .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.mdl-cell.mdl-cell--12-col
            input.mdl-textfield__input type="text" id=property.id
            label.mdl-textfield__label for=property.id
              = "#{property.name } Price"

Jquery

$('.mdl-switch__input').click(function(){ $(this).parent('.mdl-cell--4-col').$(this).fadeTo(500, 0.2); });

Thanks for the fix Dekel, much more readable now. – norcal johnny Dec 11 '16 at 13:39 — norcal johnny, Dec 11 '16 at 13:39

score 1 · Accepted Answer · answered Dec 11 '16 at 14:04

1

I believe this should do the trick.

$('.mdl-switch__input').click(function() {
    $(this).closest('.mdl-cell--4-col').fadeTo(500, 0.2);
});

answered Dec 11 '16 at 14:04

norcal johnny

2,050
2
13
17

Grey out div from toggle switch

1 Answers1