我使用了这个漂亮的iOS复选框插件Switchery iOS checkbox。默认情况下,该复选框处于禁用状态。现在,如果用户单击具有“ btn_modify”类的按钮,我想启用切换复选框,如果用户单击具有“ btn_cancel”类的按钮,则禁用它。以下是我的代码参考。
<input type="checkbox" name="" value="" class="js-switch" checked />
<button class="btn_modify">Modify</button>
<button class="btn_cancel">Cancel</button>
并激活切换台
//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 });
});
和我的尝试
$(".btn_modify").click(function(){
$(".js-switch").attr("disabled", false);
});
$(".btn_cancel").click(function(){
$(".js-switch").attr("disabled", true);
});
但很遗憾,该方法无法正常工作,我们将不胜感激任何帮助,想法,线索,建议和建议。谢谢!
最佳答案
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();
});
在你的情况下
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();
});
第二选择
的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
参考http://abpetkov.github.io/switchery/