Make a switchery enabled or disabled

[iNetw0rker]

Hello,
I am from Germany, so, sorry for my (possibly) bad english.
I've got two switchery check-boxes and one iput-field:
e-mail

Use alternate e-mail

At the End of the page, I've got the following JS:

<script type="text/javascript"> var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch')); elems.forEach(function(html) { var switchery = new Switchery(html, { color: '#41b7f1', secondaryColor: '#41b7f1' }); }); var changeCheckbox4 = document.querySelector('.js-check-change4'); var changeCheckbox5 = document.querySelector('.js-check-change5'); changeCheckbox4.onchange = function() { $("#altmail").attr('disabled', this.checked); if(changeCheckbox5.disabled == true){ changeCheckbox5.disabled=false; console.log("activate box"); } else{ changeCheckbox5.disabled=true; console.log("deactivate box"); } }; </script>

What I want is, that when "changeCheckbox4" is checked, then "changeCheckbox5" and the inputfield (#altmail) should be disabled and when "changeCheckbox4" is unchecked, "changeCheckbox5" and #altmail should be enabled.
My code works for the input-field (#altmail), but not for the switchery checkbox "changeCheckbox5". BUT the state of changeCheckbox5 seems to change, because the console in Google Chrome shows me alternating "enable box" and "disable box".
However, the changeCheckbox5 remains disabled...

I don't know what to do, hope you can help me.
iNetw0rker

Edit: How to show you my code?

[abpetkov]

Most probably you won't succeed in making this happen easily, since Switchery is currently "listening" for changes only to the value of the native checkbox element, but not to it's properties. So there will be no easy way for you to do this with the current version of Switchery. You have to try some unpleasant approaches like re-instantiating the switch with the desired config or anything else you think of.

That will be until I get down and make the appropriate changes so that this becomes native behaviour.

p.s. here's how to include code in GitHub comments.

[iNetw0rker]

I still can't include code here... but that does not matter now, because I need it no longer.
Anyhow, thank you for your answer and if I need it again, I can try it...

Edit: Thank you very much for your work!

[maimairel]

+1 for this feature. I'd like to have switch enable/disable itself when the 'disabled' property of the checkbox input is changed.

[maimairel]

If a disabled checkbox is initialized with Switchery, the resulting switch would be a disabled Switch.
But when the checkbox is later enabled by another code, the Switch remains disabled. This looks like something important to consider for the next release :)

Thank you!

[devmod]

+1

[fecloud]

+1 mark

[cansadadeserfeliz]

+1 it would be great to have this functionality

[corcorans]

+1

[marcgfx]

I'm not so git savvy, so i will just leave this here. I hacked this into the minified version and it seems to work for me (it does not listen to the input element, but you can disable/enable the switchery directly):

Switchery.prototype.disabled = function(b) {
        this.options.disabled = this.element.disabled = !!b;
        if (b) {
            this.switcher.style.opacity = this.options.disabledOpacity;
        } else {
            this.switcher.style.opacity = 1.0;
        }
    };

Switchery.prototype.handleClick = function() {
        var self = this, switcher = this.switcher, parent = self.element.parentNode.tagName.toLowerCase(), labelParent = parent === "label" ? false : true;
        if (this.isDisabled() === false) {
            fastclick(switcher);
            if (switcher.addEventListener) {
                switcher.addEventListener("click", function() {
                    if(self.isDisabled()===true) return;//<-dont handle click if disabled

                    self.setPosition(labelParent);
                    self.handleOnchange(self.element.checked)
                })
            } else {
                switcher.attachEvent("onclick", function() {
                    if(self.isDisabled()===true) return;//<-dont handle click if disabled

                    self.setPosition(labelParent);
                    self.handleOnchange(self.element.checked)
                })
            }
        } else {
            this.element.disabled = true;
            this.switcher.style.opacity = this.options.disabledOpacity
        }
    };

[dan24678]

+1.

I did end up using the workaround of recreating the switchery's when I need to toggle disabled, but it'd be nice to not have to.

[corford]

Just wanted to add another +1. It would be great if we could enable/disable switchery on the fly after instantiation (e.g. in my case I use a switch that triggers some animations elsewhere on the page and want to wait for these to complete before letting users toggle the switch again).

[mehmetgunturkun]

+1

[mennooo]

+1

[jakeorr]

+1

[abpetkov]

Released in 0.8.0

[korcstar]

var elem = document.querySelector('.js-switch');
var switchery = new Switchery(elem);
switchery.disable();
switchery.enable();

it works with current version
Thanks

[learnsomethingin]

Hi there, am new to jQuery, and using the switchery to my web template for the better UI, after checking all the above issues am still getting the error, the error is 'Uncaught TypeError: Cannot read property 'disabled' of null'
the line no. is 1905 in 'switchery.js'

Error:
Switchery.prototype.isDisabled = function() {
return this.options.disabled || this.element.disabled || this.element.readOnly; // this is the error line
};

Sorry if improper English.
Thanks
#Zeasts

[johnroodt]

Your English is just fine...I'm having the same problem with Switchery.

Switchery.prototype.isDisabled = function() {
return this.options.disabled || this.element.disabled || this.element.readOnly; // this is the error line
};

I see you've had no reply for 24 days...so I guess there's no pending fix for this?

[msopko81]

@learnsomethingin and @johnroodt

The only time I got the error you mention, I forgot to remove the following code:

var switchery_proof_of_mailing = new Switchery(document.querySelector('.js-dynamic-state'));

I did not have any elements with the js-dynamic-state as the class. Try double checking when you are calling the Switchery function and making sure elements exists or that you have a proper if test beforehand.

[leon0707]

@korcstar Seems like disable and enable functions are not attached to the element. If I use $('....') to get the switchery element, I cannot run $('....').disable(); Any solutions?