I am using Bootstrap Toggle Library with Bootstrap4 but I have problems when I try to control that user only switch 'ON' a limited number of elements. Here is my HTML code:
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"data-onstyle="success" data-offstyle="danger">
Option 1
</li> </div>
All 11 elements has the same code, and my Jquery:
$('input[name="checkImg"]').on('change', function (e) {
if ($('input[name="checkImg"]:checked').length > 3 ) {
console.log("In Condition");
$(this).prop('checked', false);
}
});
Here is a photo of the result when I switch 4 elements to 'ON':
I can see that condition is right and detect when 3 elements are switch 'ON' but I cant disabled the rest of 'False' input until some of 'On' Elements switch to 'OFF'. Anyone can help?
In addition, I use disabled from bootstrap but not worked.
Thanks for all.
Edit:
There is an error in your script. try to change this:
$('input[name=checkImg]')
to this
$('input[name="checkImg"]')
I tried correcting this and the script seems to work now.
EDIT: I see the problem is with Bootstrap-toggle, that uses a different kind of approach for checking and unchecking checkboxes.
Instead of just unchecking the checkbox you also have to change its parent div's class from "btn-success" to "btn-danger off". Now this code snippet should work for you as well.
$('input[name="checkImg"]').on('change', function (e) {
if ($('input[name="checkImg"]:checked').length > 3 ) {
console.log("You can select no more than 3 options");
$(this).prop('checked', false);
$(this).parent().removeClass("btn-success");
$(this).parent().addClass("btn-default off");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<div class="container-fluid">
<!-- Primera Fila -->
<div class="col">
<div class="card">
<div class="card-header colorPlataforma">Imagenes Disponibles</div>
<div class="card-body fuenteTabla">
<div class="overflow">
<ul class="justify-content-center col-12 connectedSortable" id="sortable1">
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
data-onstyle="success" data-offstyle="danger">
Option 1
</li>
</div>
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
data-onstyle="success" data-offstyle="danger">
Option 2
</li>
</div>
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
data-onstyle="success" data-offstyle="danger">
Option 3
</li>
</div>
<div style="border:solid border-width: 1px;">
<li class="ui-state-default">
<input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"
data-onstyle="success" data-offstyle="danger">
Option 4
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>