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:
https://jsfiddle.net/5vr0c3w2/14/
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>
Related
I have a form with several check boxes, like this:
<div class="panel box box-primary">
<div class="box-header with-border">
<!--Change Header Color and Background-->
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Gender" aria-expanded="true" class="">Gender</a>
</h4>
</div>
<div id="Gender" class="panel-collapse collapse in">
<div class="box-body">
<div class="col-md-4">
<!--When a single/all checkboxes are checked-->
<ul>
<li><input type="checkbox" name="_fiters[]" value="1">1</li>
<li><input type="checkbox" name="_fiters[]" value="2">1</li>
</ul>
</div>
</div>
</div>
</div>
What I'm trying to do is when the single/all check box is checked, change the background and color of the div which have the H4 tag. When unchecked all checkbox within div, remove the background color and h4 color. How can I do this using jquery or jquery+javascript?
for better understanding
Thanks
I am able to change the background color and but still enable to change the color of heading, here it is
$("#Gender input[type='checkbox']").change(function(){
if($(this).is(":checked")){
$(this).parent().addClass("redBackground");
}else{
$(this).parent().removeClass("redBackground");
}
});
Assign a click handler
Navigate to the title
Count the checked boxes in the group
$("[name='_fiters[]']").on("click", function() {
var $parent = $(this).closest(".box-body"),
$h4 = $parent.parents(".box-primary").find("h4");
$h4.toggleClass("green",$("[name='_fiters[]']:checked", $parent).length > 0);
});
.green {
background-color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel box box-primary">
<div class="box-header with-border">
<!--Change Header Color and Background-->
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Gender" aria-expanded="true" class="">Gender</a>
</h4>
</div>
<div id="Gender" class="panel-collapse collapse in">
<div class="box-body">
<div class="col-md-4">
<!--When a single/all checkboxes are checked-->
<ul>
<li><input type="checkbox" name="_fiters[]" value="1">1</li>
<li><input type="checkbox" name="_fiters[]" value="2">1</li>
</ul>
</div>
</div>
</div>
</div>
I think my code was be basic and its good.. i think you can use this one.
https://codepen.io/furkanbayram2/pen/vvjbMO
var myCheckbox = document.getElementById("myCheckbox");
var myDiv = document.getElementById("myDiv");
function myFunction(){
if(myCheckbox.checked == true) myDiv.style.backgroundColor ="lightblue";
else{
myDiv.style.backgroundColor ="orange";
}
}
#myDiv{
height:100px;
background-color:orange;
margin-bottom:25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div id="myDiv" class="col-md-12">
<h3>hello world</h3>
</div>
<input type="checkbox" onclick="myFunction();" id="myCheckbox" value="Test">Test Checkbox
</div>
</div>
</body>
</html>
I have few div which is collapsed.
On click of div of each element it display the collapsed content. On second click only on the same div it toggle class 'is-collapsed' and hide the element content. What i need to do is to be able to close displayed content also when i click on one of the other div or somewhere outside.
Not sure about the exact java script but take the part that is working for the toggle class.
This is the code :
/* collapse */
$('.filter-collapse .box-heading').live('click', function() {
$(this).closest('.box').toggleClass('is-collapsed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters-collapse">
<div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed">
<div class="box-heading">Sizes</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li>
<li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li>
</ul>
</div>
</div>
<div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed">
<div class="box-heading">Color</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li>
</ul>
</div>
</div>
</div>
I suggest to use another event handler on the document, which adds the is-collapsed class to all collapsable elements - ignoring the box itself, if one was clicked.
/* collapse */
$(document).on("click", function(e) {
// add collapsed to all boxes, besides a box itself was clicked.
var currentTargetBox = $(e.target).closest('.filters-collapse .box');
$('.filters-collapse .box').not(currentTargetBox).addClass('is-collapsed');
});
$(document).on("click", '.filters-collapse .box-heading', function(e) {
// toggle is-collapsed
$(this).closest('.box').toggleClass('is-collapsed');
});
.box.is-collapsed .box-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters-collapse">
<div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed">
<div class="box-heading">Sizes</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li>
<li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li>
</ul>
</div>
</div>
<div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed">
<div class="box-heading">Color</div>
<div class="box-content">
<ul class="">
<li><label><input type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li>
<li><label><input type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li>
</ul>
</div>
</div>
</div>
I have a bunch of checkboxes with the same structure, but they are spans, not selects, so the way they appear to be checked is by adding a class.
<div class="mod_6">
<div class="checkbox-wrapper">
<span class="checkbox" id="AllColors"></span>
<span>All</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox checked"></span>
<span>Blue</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Black</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Red</span>
</div>
</div>
This is my JS:
function CheckBox() {
$(".checkbox").click(function () {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
} else {
$(this).addClass('checked');
}
});
};
What I want is, if I click on a specific checkbox, in this case, the one that says 'All' (I assume I should give it an id), I want all the items with the checkbox to be modified and added the class 'checked'. I don't know how to find them as they are in different divs.
What I have tried unsuccessfully is to use find() and then addClass():
$("#allColors").click(function () {
$.each('.checkbox-wrapper').find('.checkbox').addClass('checked');
})
Thank you :)
You can just make it like this if I remember correctly:
$('#AllColors').click(function(){
$('.checkbox-wrapper > .checkbox').addClass('checked')
})
I think you are looking for this with toggleClass():
$("#AllColors").click(function (){
$(".checkbox").toggleClass('checked');
});
.checked{
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod_6">
<div class="checkbox-wrapper">
<span class="checkbox" id="AllColors">All</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox checked"></span>
<span>Blue</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Black</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Red</span>
</div>
</div>
Or with addClass():
$("#AllColors").click(function (){
$(".checkbox").addClass('checked');
});
.checked{
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod_6">
<div class="checkbox-wrapper">
<span class="checkbox" id="AllColors">All</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox checked"></span>
<span>Blue</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Black</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Red</span>
</div>
</div>
There are some issues here:
you are using #allColors instead of #AllColors
you are using each in the wrong way
better use on() instead of click()
use this instead:
$("#AllColors").on('click', function(){
$('.checkbox-wrapper').each(function(){
$(this).find('.checkbox').addClass('checked')
})
})
I need to dynamically display the accordance with the check box using bootstrap. When i click the parent check box , then my child boxes are not clicked. with static loading i can able to check it but when i keep the accordance code in JavaScript and run it when button is clicked I am unable to click the child check-boxes .
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script>
function getAccordiance()
{
var html ='';
html+='<div class="box-body subjectareaComparsion"> <div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading">';
html+='<h4 class="panel-title"><input type="checkbox" id="chckHead" class="chckHead" value="subject1"/>';
html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Sample1</a></h4> </div><div id="collapseOne" class="panel-collapse collapse in">';
html+=' <div class="panel-body"><table class="table table-striped"><tr><td><div class="checkbox"> <input type="checkbox" id="checkbox" class="chcktbl" />';
html+='<label for="checkbox">List group item heading</label></div></td></tr> </table></div> </div></div> <div class="panel panel-default">';
html+='<div class="panel-heading"> <h4 class="panel-title"><input type="checkbox" id="chckHead" class="chckHead" value="subject2"/>';
html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"> Sample2</a></h4></div><div id="collapsetwo" class="panel-collapse collapse">';
html+='<div class="panel-body"><table class="table table-striped"><tr> <td> <div class="checkbox"><input type="checkbox" id="checkbox" class="chcktbl" />';
html+='<label for="checkbox">List group item heading</label> </div></td></tr> </table> </div></div> </div></div> </div>';
$('#dataload').html(html);
}
</script>
</head>
<body class="skin-blue">
<header class="header"> <a href="index.html" class="logo">
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Sample</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row ">
<!-- left column -->
<div class="col-md-6">
<!-- Subject Area -->
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title"> Area</h3>
</div>
<button onclick="getAccordiance()">Submit</button>
<div id="dataload"></div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</aside>
<!-- /.right-side -->
</div>
<!-- ./wrapper -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.chckHead').on('click',function () {
alert("Hi");
$(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});
</script>
</body>
</html>
You need to delegate the click event as the checkboxes are dynamically generated.More on delegate
$(document).on('click', '.chckHead', function () {
alert("Hi");
$(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});
Demo Fiddle
Demo Here: http://jsfiddle.net/m3o7u7Lm/2/ (built off of your demo in your comments)
$('.childCheckBox').on('click', function() {
// do stuff here
});
The .on('click', function() {}) takes into dynamically added elements to the dom.
Also, it would be easier for you if you built a template and then cloned like this (also shown in the demo) instead of using jquery to build the html:
<div class="content">
<fieldset id="template">
<label><input type="checkbox" class="parentCheckBox">Parent</input></label>
<label><input type="checkbox" class="childCheckBox">Child 1</input></label>
<label><input type="checkbox" class="childCheckBox">Child 2</input></label>
</fieldset>
</div>
Add Another
$('.add').on('click', function(event) {
event.preventDefault();
$('#template').clone(true).attr('id', '').appendTo('.content');
});
hope this helps!
I have one drop-down with ul and li tag. It is working on click. I'm trying to open drop-down on mouse hover not a click. How can i achieve this.
<div class="ms-parent form-control">
<button type="button">
<span class="placeholder">Choose Anyone</span>
</button>
<div class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
The output is like normal html select drop-down. But i am looking to open dropdown on mouse hover event.
$(document).ready(function(){
$('#btnToChoose').hover(
function () {
$('#content').show();
},
function () {
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-parent form-control">
<button type="button" name="btnToChoose" id="btnToChoose">
<span class="placeholder">Choose Anyone</span>
</button>
<div id='content' class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
Change Design as per your convenience.
$('#btnToChoose')
.on('mouseenter', function () { $('#content').show(); })
.on('mouseleave', function () { $('#content').hide(); });