How to activate / deactivate a list of buttons "Bootstrap Toggle" from javascript?

Navigation
0

I want to deactivate the list of buttons of this type that I have on my screen, but I get an error, I do not know what I'm doing wrong.

The way to deactivate it I'm taking it out of the plugin api . 

$(document).on('click', '#deshabiltar', function() {
        var toogles = $('#toggle.botonEstado');
        for (var i = 0; i < toogles.length; i++) {
            toogles[i].bootstrapToggle('disable');
        }
});


$(document).on('click', '#habilitar', function() {
        var toogles = $('#toggle.botonEstado');
        for (var i = 0; i < toogles.length; i++) {
            toogles[i].bootstrapToggle('enable');
        }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input id="toggle" class="botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input id="toggle" class="botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input id="toggle" class="botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input id="toggle" class="botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input id="toggle" class="botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input id="toggle" class="botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">


<button type="button" id="deshabiltar" class="btn btn-primary">Deshabiltar</button>

<button type="button" id="habilitar" class="btn btn-primary">Habilitar</button>
    
asked by Pablo Contreras 05.04.2017 в 00:54
source

1 answer

1

It is not necessary to try to go through the checkboxes, looking with jquery you can point to all of them.

I just modified your js script: 

$(document).on('click', '#deshabiltar', function() {
        $(".toggle").attr("disabled", "disabled");
});


$(document).on('click', '#habilitar', function() {
        $(".toggle").removeAttr("disabled");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input class="toggle botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input class="toggle botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input class="toggle botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input class="toggle botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input class="toggle botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">
<input class="toggle botonEstado" name="my-checkbox" type="checkbox" data-toggle="toggle" checked="">


<button type="button" id="deshabiltar" class="btn btn-primary">Deshabiltar</button>

<button type="button" id="habilitar" class="btn btn-primary">Habilitar</button>

Note: For good practice, it is not advisable to handle html elements with the same id name, you can handle them with the same class without problem

    
answered by 05.04.2017 в 01:34
Python tuples in JavaScript How to activate a li depending on the page where I am with JQUERY?