I have following html and jquery code segments to validate at least one check box. I am new for jQuery so I can not validate this two check boxes. Please help me. Thank you
<div class="row">
<div class="form-horizontal">
<label class="col-sm-5 control-label input-sm">Payement Type</label>
<div class="col-sm-5">
<span id="errfnBC9" style="color:red;font-size:8pt"></span>
<input type="checkbox" name="cashactive" id="activecash" value="Cash" checked style="font-weight: bold;font-size: 11px;"> Cash
<input type="checkbox" name="creditactive" id="activecredits" value="Credit" style="font-weight: bold;font-size: 11px;"> Credit<br>
</div>
</div>
</div>
if ($('#activecash').find('input[type=checkbox]:checked').length == 0) {
document.getElementById('errfnBC9').style.display = "block";
document.getElementById('errfnBC9').innerHTML = "**Please select at least one checkbox";
return false;
}
use only with javascript or jquery .Apply with onchange event it will validate each time of the box checking.
$(document).ready(function (){
$('input[type=checkbox]').on('change',function (){
if ($('input[type=checkbox]:checked').length == 0) {
$('#errfnBC9').html( "**Please select atleast one checkbox");
}
else{
$('#errfnBC9').html( "");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-5 control-label input-sm">Payement Type</label>
<div class="col-sm-5">
<span id="errfnBC9" style="color:red;font-size:8pt"></span><br>
<input type="checkbox" name="cashactive" id="activecash" value="Cash" checked style="font-weight: bold;font-size: 11px;"> Cash
<input type="checkbox" name="creditactive" id="activecredits" value="Credit" style="font-weight: bold;font-size: 11px;"> Credit<br>
</div>
</div>
</div>
You have to add an event listener to see when the state of the checkboxes is changing:
$(".validate").on("change", function(e) {
if($("input.validate:checked").length == 0) {
$("#error").html("You must select one.");
} else {
$("#error").html("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cash" class="validate" checked /><label for="cash">Cash</label>
<input type="checkbox" id="credit" class="validate" /><label for="credit">Credit</label>
<p id="error"></p>
Related
This is my code. Here I have given class name same for both the input check box:
$(document).ready(function() {
$(document).on('change', ".check_class", function() {
$(".check_class").attr("checked", false); //uncheck all checkboxes
$(this).attr("checked", true); //check the clicked one
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row m-t-10 m-l-5">
<div class="form-group row">
<div class="col-sm-4">
<label class="checkbox-inline">
<input type="checkbox" class="check_class" value="is_email" name="is_email">
Email send?
</label>
</div>
<div class="col-sm-4">
<label class="checkbox-inline">
<input type="checkbox" class="check_class" value="is_sms" name="is_sms">
Sms send?
</label>
</div>
</div>
</div>
I tried a lot but its still not working. Any mistakes. Thank you.
You code will work fine if you use .prop() instead of .attr() like below:-
$(document).ready(function() {
$(document).on('change', ".check_class", function () {
$(".check_class").prop("checked", false);
$(this).prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row m-t-10 m-l-5">
<div class="form-group row">
<div class="col-sm-4">
<label class="checkbox-inline"> <input type="checkbox" class="check_class" value="is_email" name="is_email">Email send?</label>
</div>
<div class="col-sm-4">
<label class="checkbox-inline"> <input type="checkbox" class="check_class" value="is_sms" name="is_sms">Sms send?</label>
</div>
</div>
</div>
Note:- You can go for radio button, because they are specially designed to handle above scenario.
Reference:- why .attr() not worked but .prop() worked
If only one of these checkboxes should be checked at a single time, just use a radio button. It's exactly what they were designed for, and it saves the need for any JS code at all:
<div class="row m-t-10 m-l-5">
<div class="form-group row">
<div class="col-sm-4">
<label class="checkbox-inline">
<input type="radio" class="check_class" value="is_email" name="send">
Email send?
</label>
</div>
<div class="col-sm-4">
<label class="checkbox-inline">
<input type="radio" class="check_class" value="is_sms" name="send">
Sms send?
</label>
</div>
</div>
</div>
$(document).on('change', ".check_class", function () {
$(".check_class").each(function(index,element){
element.attr("checked", false);
}); //uncheck all check-boxes
});
You can use not(this) to uncheck all other check boxes.
$(document).ready(function() {
$(document).on('change', ".check_class", function() {
$(".check_class").not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row m-t-10 m-l-5">
<div class="form-group row">
<div class="col-sm-4">
<label class="checkbox-inline"> <input type="checkbox" class="check_class" value="is_email" name="is_email">Email send?</label>
</div>
<div class="col-sm-4">
<label class="checkbox-inline"> <input type="checkbox" class="check_class" value="is_sms" name="is_sms">Sms send?</label>
</div>
</div>
</div>
I have 4 multiple check boxes which each one of them is specifically correspondent to 4 text-boxes. I need to enable the disabled texbox when the corresponding checkbox is checked. I wrote a same function for each checkbox's onclick event in html tag itself as onclick="document.getElementById('txtLrgPrc').disabled=!this.checked;" .
But I need to automate this by calling a function only once by sending the parameters of textboxes and heckboxes(i.e. id or name,,) to my js file using jQuery. Can anyone help me for refining this please?
Here is the code which I am currently using and it works finely.
jsp page:
<div class="row item-tbl-row" id="addItmChkbxReg">
<div class="col-xs-5">
<label class="checkbox-inline">
<form:checkbox value="regular" class="checkbox sizechkbx" path="size" label="Regular" id="chkReg" onclick="document.getElementById('txtRegPrc').disabled=!this.checked;"/>
</label>
</div>
<div class="col-xs-7">
<form:input type="text" class="form-control price" path="price" id="txtRegPrc" disabled="true"/>
</div>
</div>
<div class="row item-tbl-row" id="addItmChkbxMed">
<div class="col-xs-5">
<label class="checkbox-inline">
<form:checkbox value="medium" class="checkbox sizechkbx" path="size" label="Medium" onclick="document.getElementById('txtMedPrc').disabled=!this.checked;"/>
</label>
</div>
<div class="col-xs-7">
<form:input type="text" class="form-control price" path="price" id="txtMedPrc" disabled="true"/>
</div>
</div>
<div class="row item-tbl-row" id="addItmChkbxLrg">
<div class="col-xs-5">
<label class="checkbox-inline">
<form:checkbox value="large" class="checkbox sizechkbx" path="size" label="Large" onclick="document.getElementById('txtLrgPrc').disabled=!this.checked;"/>
</label>
</div>
<div class="col-xs-7">
<form:input type="text" class="form-control price" path="price" id="txtLrgPrc" disabled="true"/>
</div>
</div>
You can automate like the following.
<script type="text/javascript">
$(document).ready(function () {
$(".checkbox").click(function () {
$(this).parent().parent().next().find(".form-control").prop("disabled", !$(this).prop("checked"));
});
});
</script>
Also, remove the click event of the checkboxes.
Another solution:
<script type="text/javascript">
function C(t, textBoxId) {
$("#" + textBoxId).prop("disabled", !$(t).prop("checked"));
}
</script>
<form:checkbox value="regular" id="chkReg" onclick="C(this, 'txtRegPrc')"/>
I want to hide and show div on check and uncheck of checkbox. I am getting the parent and finding the div which I want to hide. But code is not running
Jquery is:
$('.show-check').click(function() {
if (this.checked) {
$(this).parent().find('.div-check').fadeIn('slow');
} else
$(this).parent().find('.div-check').fadeOut('slow');
});
HTML:
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>
Why your code does not work :
$(this).parent() will give you label - and find('.div-check') won't return anything.
Use closest() - to get a common parent which has the desired child element,
$(this).closest('.type-details').find('.div-check').fadeIn('slow');
Also, I'd suggest you use change() event instead of click() on checkbox in the below,
$('.show-check').click(function() {
Use this script instead
$('.show-check').click(function() {
if ($(this).prop('checked')) {
$(this).parents('.type-details').find('.div-check').fadeIn('slow');
} else
$(this).parents('.type-details').find('.div-check').fadeOut('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>
Use $('input').is(':checked')
In your example: $(this).is(':checked')
You have to use parents() to select the correct wrapper to find your element div-check
var $check = $(this).parents('.type-details').find('.div-check');
$('.show-check').click(function() {
if ($(this).is(':checked')) {
$check.fadeIn('slow');
} else
$check.fadeOut('slow');
});
Use $(this).closest(".type-details").find('.div-check') to get the div-check div and hide/show it.
$('.show-check').click(function() {
if (this.checked) {
$(this).closest(".type-details").find('.div-check').fadeIn('slow');
} else {
$(this).closest(".type-details").find('.div-check').fadeOut('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>
$('.show-check').click(function() {
if ($(this).is(":checked")) {
$(this).closest('.type-details').find('.div-check').fadeIn('slow');
} else
$(this).closest('.type-details').find('.div-check').fadeOut('slow');
});
Try this code :
$('.show-check').click(function() {
$(this).toggleClass('checked unchecked');
if ($(this).hasClass('checked')) {
$(this).parents('.type-details').find('.div-check').fadeIn('slow');
} else {
$(this).parents('.type-details').find('.div-check').fadeOut('slow');
}
});
<input type="checkbox" class="show-check checked" checked>
do you know how to disable textbox when the checkbox is checked? This code below is worked when I am using Laravel 5 only. But when I am integrating it with AdminLTE, this won't worked.
<div class="form-group">
<script type="text/javascript">
$(function () {
$("#unlimited").click(function () {
if ($(this).is(":checked")) {
$("#masa_berlaku_from").attr("disabled", "disabled");
$("#masa_berlaku_to").attr("disabled", "disabled");
} else {
$("#masa_berlaku_from").removeAttr("disabled");
$("#masa_berlaku_to").removeAttr("disabled");
}
});
});
</script>
<label for="masa_berlaku" class="control-label col-sm-2">Masa Berlaku</label>
<div class="col-md-3">
<input class="form-control" data-provide="datepicker" data-date-format="yyyy-mm-dd" name="masa_berlaku" id="masa_berlaku_from" placeholder="from">
</div>
<div class="col-md-3">
<input class="form-control" data-provide="datepicker" data-date-format="yyyy-mm-dd" name="masa_berlaku" id="masa_berlaku_to" placeholder="to">
</div>
<div class="col-md-3">
<div class="checkbox">
<label>
<input type="checkbox" name="masa_berlaku" value="0000-00-00" id="unlimited"> Unlimited
</label>
</div>
</div>
</div>
How can I remove the value once the user click the Yes and input a value on input box but change his mind and click the No option but the input value is still there
<div class="control-group">
<label class="control-label" for="radios">Do you offer rented call center seating on a monthly basis?</label>
<div class="controls">
<label class="radio" for="yes">
<input type="radio" name="radios-1" id="radios-1" value="Yes">Yes</label>
<label class="radio" for="no">
<input type="radio" name="radios-1" id="radios-1" value="No">No</label>
</div>
</div>
<div class="form-group" style="display:none;" id="seatnumber">
<label class="control-label" for="name">How many seats do you have available?</label>
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control input-normal" placeholder="Enter number of seats here..." name="monthly_rental" id="monthly_rental">
</div>
</div>
JS
$('input[name|="radios-1"]').change(function() {
if($(this).val()=='Yes') {
$('#seatnumber').fadeIn();
} else {
$('#seatnumber').fadeOut();
}
});
Try this:
$('input[name|="radios-1"]').change(function() {
if($(this).val()=='Yes') {
$('#seatnumber').fadeIn();
} else {
$('#seatnumber input').val(''); // remove value when user click No
$('#seatnumber').fadeOut();
}
});
DEMO
$('input[name|="radios-1"]').change(function() {
$('#monthly_rental').val('');
if($(this).val()=='Yes') {
$('#seatnumber').fadeIn();
} else {
$('#seatnumber').fadeOut();
}
});
Demo:
http://jsfiddle.net/7Te9d/