CODEWITHSUNDEEP
javascriptjquery
Juliver Galleto
Juliver Galleto

Reputation: 9037

turn disabled attribute to true or false switchery

I use this nice iOS checkbox plugin Switchery iOS checkbox. By default, the checkbox is disabled. Now, I want to enable the switchery checkbox if user click the button that has a class of "btn_modify" and disabled it back if user click the button that has a class of "btn_cancel". Below is my code reference.

<input type="checkbox" name="" value="" class="js-switch" checked />
<button class="btn_modify">Modify</button>
<button class="btn_cancel">Cancel</button>

and activate the switchery

//switchery
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
  var switchery = new Switchery(html, { size: 'small', disabled: true, disabledOpacity: 1.0 });
});

and my attempt

$(".btn_modify").click(function(){
    $(".js-switch").attr("disabled", false);
});

$(".btn_cancel").click(function(){
    $(".js-switch").attr("disabled", true);
});

but sadly not working, any help, ideas, clues, suggestions, recommendations will be greatly appreciated. Thank you!

Upvotes: 3

Views: 9443

Answers (2)

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

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

document.querySelector('.js-dynamic-disable').addEventListener('click', function() {
  switchery.disable();
});

document.querySelector('.js-dynamic-enable').addEventListener('click', function() {
  switchery.enable();
});

In your case it will be 

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

document.querySelector('.btn_cancel').addEventListener('click', function() {
  switchery.disable();
});

document.querySelector('.btn_modify').addEventListener('click', function() {
  switchery.enable();
});

2nd Option

CSS

.disabled{
 opacity: 0.5;
 pointer-events: none;    
}

JS

$(".btn_modify").on("click",function(){
        $(".switchery").removeClass("disabled");
    });

$(".btn_cancel").on("click",function(){
    $(".switchery").addClass("disabled");
});

Jsfiddle Demo

Reference http://abpetkov.github.io/switchery/

Upvotes: 8

omikes
omikes

Reputation: 8513

disabled = false will still register as disabled. the only way to have it enabled is to remove the disabled attribute completely, something like:

$(".js-switch").removeAttr('disabled');

Upvotes: -1

Related Questions