how to multicheckbox for 1 enabled textbox

how to multicheckbox for 1 enabled textbox - javascript

i want if cuti tahunan not checked then textbox not show in cuti khusus dan cuti sakit
$('#cutiKhusus').change(function(){
$("#textCutiKhusus").prop("disabled", !$(this).is(':checked'));
});
$('#cutiSakit').change(function(){
$("#textCutiSakit").prop("disabled", !$(this).is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label">Jenis Cuti</label>
<div class="col-sm-8">
<div class="checkbox">
<label>
<input id="cutitahunan" type="checkbox" id="" name="C_CUTI_TAHUNAN" value="Y"/>
Cuti Tahunan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cutiSakit" name="C_CUTI_SAKIT" value="Y"/>
Cuti Sakit
<input id="textCutiSakit" type="number" data-tt='tooltip' data-placement='top' title='Isikan jumlah hari 'required name="I_JML_SAKIT" class="" style="width: 50px;" disabled >
Hari
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cutiKhusus" name="C_CUTI_KHUSUS" value="Y"/>
Cuti Khusus
</label>
<input id="textCutiKhusus" type="number" data-tt='tooltip' data-placement='top' title='Isikan jumlah hari ' required name="I_JML_KHUSUS" class="" style="width: 50px;" disabled >
Hari
</div>
</div>
</div>
How can I solve this?
fdasfadfasfasdf fads fads fads fa fasd fasd fasdf

Try below code.
$('#cutitahunan').change(function() {
if ($(this).is(':checked')) {
$('.text').removeClass('hide');
} else {
$('.text').addClass('hide');
}
})
$('#cutiKhusus').change(function() {
$("#textCutiKhusus").prop("disabled", !$(this).is(':checked'));
});
$('#cutiSakit').change(function() {
$("#textCutiSakit").prop("disabled", !$(this).is(':checked'));
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label">Jenis Cuti</label>
<div class="col-sm-8">
<div class="checkbox">
<label>
<input id="cutitahunan" type="checkbox" id="" name="C_CUTI_TAHUNAN" value="Y"/>
Cuti Tahunan
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cutiSakit" name="C_CUTI_SAKIT" value="Y"/>
Cuti Sakit
<input id="textCutiSakit" type="number" data-tt='tooltip' data-placement='top' title='Isikan jumlah hari 'required name="I_JML_SAKIT" class="hide text" style="width: 50px;" disabled >
Hari
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cutiKhusus" name="C_CUTI_KHUSUS" value="Y"/>
Cuti Khusus
</label>
<input id="textCutiKhusus" type="number" data-tt='tooltip' data-placement='top' title='Isikan jumlah hari ' required name="I_JML_KHUSUS" class="hide text" style="width: 50px;" disabled >
Hari
</div>
</div>
</div>

Related

How to hide input fields of a form which are not checked and display only checked ones

I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});

If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();

Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>

try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});

Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>

Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>

Jquery show hide not working as expected?

I have below HTML structure and i need to show / Hide the filter elements.
My Use case is, On page load each filter group should be restricted to 3 filter elements with option to expand more on click of + button.
Same has to be done to show only top 3 filter elements on click of - button.
For Ex. I have size as filter group and filter elements as S, M, L, XL, XXL. I want to show only 3 elements on page load and rest to has to be hidden. On click of + button all the elements should be displayed.
On click of - button, only top 3 elements to be displayed(S,M,L). Below are the code sample and Jquery which i have tried but it is not coming.
$(document).ready(function() {
$(".showLess").hide();
// used to hide elements which are > 3 in numbers
$('.list-group-item label:lt(3)').next().hide();
// On click of + button need to show rest of the filter elements
$('.loadMore').click(function() {
$(".showLess").show();
$('.list-group-item label:lt(5)').next().show();
});
// On click of - button need to show only top 3 filter elements
$('.showLess').click(function() {
$(".showLess").hide();
$('.list-group-item label').closest().not(':lt(3)').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59">S
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="60">M
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">L
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XL
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XXL
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<div id="filter-group21" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="144">Chiffon
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="145">Corduroy
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Cotton
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Wool
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Silk
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
</div>

Find within parent and slice the number you want to show or hide and then show/hide.
$(".showLess").hide();
$('.cf').each(function() {
$(this).find('.checkbox').slice(3).hide();
})
$('.loadMore').on('click', function() {
$(this).hide().next().show();
$(this).parent().find('.checkbox').show();
})
$('.showLess').on('click', function() {
$(this).hide();
$(this).prev().show();
$(this).parent().find('.checkbox').slice(3).hide();
})
$(document).ready(function() {
$(".showLess").hide();
$('.cf').each(function() {
$(this).find('.checkbox').slice(3).hide();
})
$('.loadMore').on('click', function() {
$(this).hide().next().show();
$(this).parent().find('.checkbox').show();
})
$('.showLess').on('click', function() {
$(this).hide();
$(this).prev().show();
$(this).parent().find('.checkbox').slice(3).hide();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59">S
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="60">M
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">L
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XL
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XXL
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<div id="filter-group21" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="144">Chiffon
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="145">Corduroy
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Cotton
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Wool
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Silk
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
</div>

First issue, you are calling $(".showLess").show(); so it is selecting all of the elements with the showLess class. You do the same thing with the list. Instead of doing all this logic in the JavaScript, you can do it in CSS with adding and removing a class.
$(document).ready(function() {
$('.loadMore, .showLess').click(function() {
var btn = $(this);
var isMore = btn.hasClass("loadMore")
btn.closest(".list-group-item").toggleClass("active", isMore);
});
});
.showLess {
display: none;
}
.list-group-item > div > label {
display: block;
}
.list-group-item > div > label:nth-of-type(1n+3) {
display: none;
}
.list-group-item.active .showLess {
display: block;
}
.list-group-item.active .loadMore {
display: none;
}
.list-group-item.active > div > label:nth-of-type(1n+3) {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59">S
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="60">M
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="61">L
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="61">XL
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="61">XXL
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<div id="filter-group21" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="144">Chiffon
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="145">Corduroy
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Cotton
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Wool
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Silk
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
</div>
If you really want to do it with JavaScript, your code would need to be something like this (untested)
$('.loadMore').click(function() {
var btn = $(this);
btn.siblings(".showLess").show();
btn.hide();
btn.parent().find("label").show();
});
// On click of - button need to show only top 3 filter elements
$('.showLess').click(function() {
var btn = $(this);
btn.siblings(".loadMore").show();
btn.hide();
btn.parent().find("label:gt(3)").hide();
});

$(document).ready(function() {
$(".showLess").hide();
// used to hide elements which are > 3 in numbers
$('.list-group-item').each(function(){
$(this).find('label :gt(2)').hide();
})
// On click of + button need to show rest of the filter elements
$('.loadMore').click(function() {
$(this).next().show();
//$(this).hide();
$(this).next().show();
$(this).parent().find('label').show();
});
// On click of - button need to show only top 3 filter elements
$('.showLess').click(function() {
$(this).hide();
$(this).parent().find('label').not(':lt(3)').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59">S
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="60">M
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">L
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XL
</label>
<label class="checkbox cb_test" style="display: block;">
<input name="filter[]" type="checkbox" value="61">XXL
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<div id="filter-group21" class="cf">
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="144">Chiffon
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="145">Corduroy
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Cotton
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Wool
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="146">Silk
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more" style="display: inline-block;">-</button>
</div>
</div>
</div>

How to apply checkValidity() in forms?

I have three column form with 1st column having input fields and next two having checkboxes,if i submit my form without entering anything then an alert appears for 2nd and 3rd column on page top and then alert msg appears for column1. How to use this method here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Study Schedule</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="page-header">
<div class="well">
<h1 align="center" style="color:Brown;"><b>Study Schedule </b> </h1>
</div>
</div>
<form>
<div class="container">
<div class="row">
<!--Column 1-->
<div class="col-lg-3 jumbotron">
<div class="form-group">
<span><b>Teacher Name</b></span>
<span class="glyphicon glyphicon-asterisk"></span>
<select class="form-control" required >
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select> </div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
</div>
<div class="col-lg-1">
</div>
<!--Column 2-->
<div class="col-lg-3 jumbotron">
<!--Row 1-->
<div class="row">
<b>Subject</b>
<span class="glyphicon glyphicon-asterisk"></span>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S4</label>
<script type="text/javascript">
function validate()
{
var flag=0;
var chks = document.getElementsByName('chk[]');
var hasChecked = false;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
hasChecked = true;
break;
}
}
if(hasChecked==false)
{
alert("Please select atleast one subject");
return false;
}
if(flag==1)
{
var chks = document.getElementsByName('chk[]');
var hasChecked = false;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
hasChecked = true;
break;
}
}
if(hasChecked==false)
{
alert("Please select atleast one Day");
return false;
}
return true;
}
}
</script>
</div>
</div>
<!--Row 2-->
<div class="row">
<b>Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
<!--Row 3-->
<div class="row">
<b>Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
<!--Row 4-->
<div class="row">
<b>Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
<!--Row 5-->
<div class="row">
<b> Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
</div>
<div class="col-lg-1">
</div>
<!--Column 3-->
<div class="col-lg-4 jumbotron">
<!--Row 1-->
<div class="row">
<b>Class Days</b>
<span class="glyphicon glyphicon-asterisk"></span>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
<script type="text/javascript">
function day()
{
var chks = document.getElementsByName('chk[]');
var hasChecked = false;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
hasChecked = true;
break;
}
}
if(hasChecked==false)
{
alert("Please select atleast one day");
return false;
}
return true;
}
</script>
</div>
</div>
<!--Row 2-->
<div class="row">
<b>Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
<!--Row 3-->
<div class="row">
<b>Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
<!--Row 4-->
<div class="row">
<b>Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
<!--Row 5-->
<div class="row">
<b> Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
</div>
<br>
<br>
<div class="col-lg-10">
<b>Prinicipal Name</b>
<span class="glyphicon glyphicon-asterisk"></span>
<input type="text" class="form-control" placeholder="Enter Name" required>
</div>
<br>
<div class="col-lg-4">
<b>Date of schedule Application</b>
<span class="glyphicon glyphicon-asterisk"></span>
<div class="form-group">
<div class='input-group date' id="datetimepicker1">
<input type='text' class="form-control" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker();
});
</script>
</div>
<div class="col-lg-10" align="center">
<div class="row">
<div class ="btn btn-info" role="button">
<input type="Submit" class="btn btn-info" value="Submit" onclick="validate();">
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</form>
</body>
</html>

In validate() function you used 2nd column as initial. Use first column and in submit button give return like this onclick="return validate()"

jQuery check checkbox is not working with second time

I have html with anchors and checkboxs. Now When user select to anchor, I want to check checkbox to closest anchor.
For example, If I click to Travel anchor Travel checkbox need to be checked and then I click to Kids anchor Kids checkbox need to be checked and add/remove active class from anchor.
In my example it is working with only first anchor selection, when you select any other anchor it will not work and not select any checkbox.
Here is my JSFiddle: http://jsfiddle.net/zaarwejy/1/
<div class="row instagram-details">
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Sports
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Health & Fitness
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Photography
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Food
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Travel
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Automotive
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Fashion
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Beauty
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Youth
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Technology
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Weddings
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Adventure
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Luxury
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Provocative
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Pets
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Kids
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Architecture
</div>
<div class="col-md-2"> <input type="checkbox" id="" class="industrie_branch_option" value="">Art & Design
</div>
</div>
and jQuery code:
$(".instagram-details a").click(function () {
var ele = $(this).closest('a').find(':checkbox');
if ($(':checked').length) {
ele.prop('checked', false);
$(this).removeClass('active');
} else {
ele.prop('checked', true);
$(this).addClass('active');
}
});

Instead of that, you can just use <label>:
$(function() {
$("input:checkbox").click(function() {
if (this.checked)
$(this).closest("label").addClass("active");
else
$(this).closest("label").removeClass("active");
});
});
label.active {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row instagram-details">
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Sports</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Health & Fitness</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Photography</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Food</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Travel</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Automotive</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Fashion</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Beauty</label>
</div>
<div class="col-md-2">
<label class="active">
<input type="checkbox" id="" class="industrie_branch_option" value="">Youth</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Technology</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Weddings</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Adventure</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Luxury</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Provocative</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Pets</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Kids</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" id="" class="industrie_branch_option" value="">Architecture</label>
</div>
<div class="col-md-2">
<label class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Art & Design</label>
</div>
</div>

The problem is $(':checked').length will return a truthy value if any one of the checkboxes in the page is checked
You can simplify the logic using toggling like
$(".instagram-details a").click(function () {
$(this).toggleClass('active');
$(this).find(':checkbox').prop('checked', $(this).hasClass('active'));
});
Here we first toggle the active class of the clicked anchor element, then we sets the checked state of the checkbox using whether the anchor element has the active class or not
Demo: Fiddle

Change only this:
if ($(':checked').length) {
With this
if (ele.prop("checked")) {
And it works
fiddle: http://jsfiddle.net/zaarwejy/2

There's no need of using JS, if you can restructure the HTML. You can use sibling selector and :checked property of the checkbox to change the styles of the corresponding label.
You can use label.
Demo
:checked + label {
color: red;
}
<div class="row instagram-details">
<div class="col-md-2">
<input type="checkbox" id="1" class="industrie_branch_option" value="">
<label for="1">Sports</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="2" class="industrie_branch_option" value="">
<label for="2">Health & Fitness</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="3" class="industrie_branch_option" value="">
<label for="3">Photography</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="4" class="industrie_branch_option" value="">
<label for="4">Entertainment</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="5" class="industrie_branch_option" value="">
<label for="5">Food</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="6" class="industrie_branch_option" value="">
<label for="6">Travel</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="7" class="industrie_branch_option" value="">
<label for="7">Lifestyle</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="8" class="industrie_branch_option" value="">
<label for="8">Automotive</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="9" class="industrie_branch_option" value="">
<label for="9">Fashion</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="10" class="industrie_branch_option" value="">
<label for="10">Beauty</label>
</div>
</div>
If you cannot change the HTML structure, then you need to use JS.
Your selector $(':checked').length checks if there is atleast one checked checkbox. So, when one checkbox is checked for next checkbox the code doesn't work.
To toggle the checkbox state use
ele.prop('checked', !ele.checked);
To toggle class use
$(this).toggleClass('active', ele.is(':checked'));
Updated Fiddle
$(".instagram-details a").click(function() {
var ele = $(this).closest('a').find(':checkbox');
ele.prop('checked', !ele.checked);
$(this).toggleClass('active', ele.is(':checked'));
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row instagram-details">
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Sports</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Health & Fitness</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Photography</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Entertainment</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Food</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Travel</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Lifestyle</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Automotive</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Fashion</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Beauty</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Youth</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Technology</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Weddings</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Adventure</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Luxury</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Tattoos</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Provocative</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Pets</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Kids</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);">
<input type="checkbox" id="" class="industrie_branch_option" value="">Architecture</a>
</div>
<div class="col-md-2">
<a href="javascript:void(0);" class="">
<input type="checkbox" id="" class="industrie_branch_option" value="">Art & Design</a>
</div>
</div>

Check this!
$(".instagram-details a").click(function () {
var ele = $(this).closest('a').find(':checkbox');
if ($(ele).prop('checked')) {
ele.prop('checked', false);
$(this).removeClass('active');
} else {
ele.prop('checked', true);
$(this).addClass('active');
}
});

Change your code with following
$(".instagram-details a").click(function () {
var ele = $(this).closest('a').find(':checkbox');
if (ele.prop('checked')) {
ele.prop('checked', false);
$(this).removeClass('active');
} else {
ele.prop('checked', true);
$(this).addClass('active');
}
});

Checking a checkbox using jquery from another div using prop()

I don't know why this is not working. I tried the same way as seen in some of the stackflow solutions but still not getting the image as well as the checkbox response.
<form>
<div class="col s12">
<div style="display:none">
<label for="Type">Type</label>
<input type="hidden" id="Type">
<div class="checkbox">
<input type="checkbox" id="Type1" checked="false" name="Type[]" value="1">
<label for="Type1">Fruits</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type2" checked="false" name="Type[]" value="2">
<label for="Type2">Vegetables</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type3" checked="false" name="Type[]" value="3">
<label for="Type3">Pulses</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type4" checked="false" name="Type[]" value="4">
<label for="Type4">SeaFoods</label>
</div>
</div>
<p>Food types</p>
<ul>
<li class="unchkd"><span class="food-icons fruit"></span> <span class="iconname">Fruits</span></li>
<li class="unchkd"><span class="food-icons vegi"></span> <span class="iconname">Vegetables</span></li>
<li class="unchkd"><span class="food-icons pulses"></span> <span class="iconname">Pulses</span></li>
<li class="unchkd"><span class="food-icons seaFood"></span> <span class="iconname">Sea Food</span></li>
</ul>
</div>
</div>
</form
JQuery for this:
$(document).ready(function(){
$("span.food-icons.fruit").click(function(){
if($(".checkbox #Type1").prop("checked") == false){
$('.checkbox #Type1').prop('checked', true);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits1.png)";
}
else{
$('.checkbox #Type1').prop('checked', false);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits.png)";
}
});
});

Your clicking span.iconname not span.food-icons. wrap .iconname in .food-icons
You are also missing a closing bracket on you $.css selector.
$(document).ready(function(){
$(".food-icons.fruit>.iconname").click(function(){
console.log("click");
if($(".checkbox #Type1").prop("checked") == false){
$('.checkbox #Type1').prop('checked', true);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits1.png)");
}
else{
$('.checkbox #Type1').prop('checked', false);
$("span.food-icons.fruit").css("background-image", "url(images/icons/fruits.png)");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col s12">
<div style="display:inherit">
<label for="Type">Type</label>
<input type="hidden" id="Type">
<div class="checkbox">
<input type="checkbox" id="Type1" checked="false" name="Type[]" value="1">
<label for="Type1">Fruits</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type2" checked="false" name="Type[]" value="2">
<label for="Type2">Vegetables</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type3" checked="false" name="Type[]" value="3">
<label for="Type3">Pulses</label>
</div>
<div class="checkbox">
<input type="checkbox" id="Type4" checked="false" name="Type[]" value="4">
<label for="Type4">SeaFoods</label>
</div>
</div>
<p>Food types</p>
<ul>
<li class="unchkd"><span class="food-icons fruit"> <span class="iconname">Fruits</span></span></li>
<li class="unchkd"><span class="food-icons vegi"></span> <span class="iconname">Vegetables</span></li>
<li class="unchkd"><span class="food-icons pulses"></span> <span class="iconname">Pulses</span></li>
<li class="unchkd"><span class="food-icons seaFood"></span> <span class="iconname">Sea Food</span></li>
</ul>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

how to multicheckbox for 1 enabled textbox - javascript

Related

How to hide input fields of a form which are not checked and display only checked ones

Jquery show hide not working as expected?

How to apply checkValidity() in forms?

jQuery check checkbox is not working with second time

Checking a checkbox using jquery from another div using prop()

Categories

Resources