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>
Related
I have a fairly straightforward validation function that only checks if input is empty or not. I'm using it across a half dozen different forms and it seems to be working everywhere except one specific input id="driver_first_name" . Can't figure out why it fails there.
If I leave all fields empty I get errors on all of them, and is generally correct across any combination I have tried except driver_first_name In the case that I fill out everything except driver_first_name the form submits anyways.
Any insight on what might be going on here?
Thank you!
My Validation function is this:
function validateForm(form, fields) { //add exit anbimation and reset the container state
$(".form-input-error").remove();
var result=false;
$.each( fields.rules, function( key, value ) {
if(!$("#"+key+"").val()){
$("#"+key+"").addClass("form-error");
$( "<div class='form-input-error'>"+value.message+"</div>" ).insertBefore("#"+key+"");
result = false;
//console.log(this.val());
}
else{
$("#"+key+"").removeClass("form-error");
result = true;
}
});
return result;
}
I am calling my validation on my submit triggers, generally like this for fields that should not be empty:
$(".app-canvas").on('click', ".submitNewDriver", function () {//list all drivers trigger
var checkInputs = {
rules: {
driver_first_name: {
message: "First Name is Required"
},
driver_last_name: {
message: "Last Name is Required"
},
driver_address_street: {
message: "street is Required"
}
}
};
if(validateForm($("#addDriverForm"),checkInputs) == true){
console.log("form submit");
addNewDriver();
}
else{
console.log("form errors");
}
});
My full form HTML is
<div class="form-wrapper">
<form id="addDriverForm" class="post-form" action="modules/add_driver.php" method="post">
<div class="form-row">
<label for="driver_first_name">First Name:</label>
<input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
</div>
<div class="form-row">
<label for="driver_last_name">Last Name:</label>
<input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
</div>
<div class="form-row">
<label for="driver_address_street">Street</label>
<input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
</div>
<div class="form-row">
<label for="driver_address_city">City</label>
<input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
</div>
<div class="form-row">
<label for="driver_address_state">State</label>
<input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
</div>
<div class="form-row">
<label for="driver_address_zip">Zip</label>
<input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
</div>
<div class="form-row">
<label for="driver_telephone">Zip</label>
<input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
</div>
<div class="form-row">
<label for="driver_email">E-Mail</label>
<input id="driver_email" placeholder="60164" type="email" name="driver_email">
</div>
<div class="form-row"><label for="driver_payment_type">Settlement Type</label>
<select id="driver_payment_type" name="driver_payment_type">
<option value="flat">Flat Rate</option>
<option value="percent">Percent</option>
<option value="mile">Per Mile</option>
</select></div>
<div class="form-row">
<label for="driver_license_number">Lisence #</label>
<input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
</div>
<div class="form-row">
<label for="driver_license_expiration">Lisence Expiration Date</label>
<input id="driver_license_expiration" type="date" name="driver_license_expiration">
</div>
<div class="form-row">
<label for="driver_licence_image">Lisence Copy</label>
<input id="driver_licence_image" type="file" name="driver_licence_image">
</div>
<div class="form-row">
<label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
<input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
</div>
<div class="form-row">
<label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
<input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
</div>
<div class="form-row">
<label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
<input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
</div>
<div class="form-row"></div>
<div class="driver-access-copnditional">
<div class="form-row">
<label for="driver_username">Username</label>
<input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
</div>
<div class="form-row">
<label for="driver_password">Password</label>
<input id="driver_password" placeholder="***" type="password" name="driver_password">
</div>
</div>
<div class="clear"></div>
<div class="submitNewUnit button green"><i class="material-icons">save</i>Submit</div>
</form>
</div>
Your validation logic is a little messed up. This is what's happening:
#driver_first_name is validated as invalid... result is set false
#driver_last_name is validated as valid... result is set true
#driver_address_street is validated as valid... result is set true
After all that the code thinks the form is valid. You're only preventing the form from being submitted if the last field as validated as not-valid.
Change your logic to assume the form is valid from the beginning. Then set it to false if any of the fields are invalid.
I also don't see anything in your code that actually prevents the form submition, so I also added e.preventDefault()
function validateForm(form, fields) { //add exit anbimation and reset the container state
$(".form-input-error").remove();
var result = true;
$.each(fields.rules, function(key, value) {
if (!$("#" + key + "").val()) {
$("#" + key + "").addClass("form-error");
$("<div class='form-input-error'>" + value.message + "</div>").insertBefore("#" + key + "");
result = false;
//console.log(this.val());
} else {
$("#" + key + "").removeClass("form-error");
}
});
return result;
}
$(".app-canvas").on('click', ".submitNewDriver", function(e) { //list all drivers trigger
var checkInputs = {
rules: {
driver_first_name: {
message: "First Name is Required"
},
driver_last_name: {
message: "Last Name is Required"
},
driver_address_street: {
message: "street is Required"
}
}
};
if (validateForm($("#addDriverForm"), checkInputs) == true) {
console.log("form submit");
} else {
e.preventDefault();
console.log("form errors");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-canvas form-wrapper">
<form id="addDriverForm" class="post-form" action="" method="post">
<div class="form-row">
<label for="driver_first_name">First Name:</label>
<input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
</div>
<div class="form-row">
<label for="driver_last_name">Last Name:</label>
<input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
</div>
<div class="form-row">
<label for="driver_address_street">Street</label>
<input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
</div>
<div class="form-row">
<label for="driver_address_city">City</label>
<input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
</div>
<div class="form-row">
<label for="driver_address_state">State</label>
<input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
</div>
<div class="form-row">
<label for="driver_address_zip">Zip</label>
<input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
</div>
<div class="form-row">
<label for="driver_telephone">Zip</label>
<input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
</div>
<div class="form-row">
<label for="driver_email">E-Mail</label>
<input id="driver_email" placeholder="60164" type="email" name="driver_email">
</div>
<div class="form-row"><label for="driver_payment_type">Settlement Type</label>
<select id="driver_payment_type" name="driver_payment_type">
<option value="flat">Flat Rate</option>
<option value="percent">Percent</option>
<option value="mile">Per Mile</option>
</select></div>
<div class="form-row">
<label for="driver_license_number">Lisence #</label>
<input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
</div>
<div class="form-row">
<label for="driver_license_expiration">Lisence Expiration Date</label>
<input id="driver_license_expiration" type="date" name="driver_license_expiration">
</div>
<div class="form-row">
<label for="driver_licence_image">Lisence Copy</label>
<input id="driver_licence_image" type="file" name="driver_licence_image">
</div>
<div class="form-row">
<label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
<input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
</div>
<div class="form-row">
<label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
<input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
</div>
<div class="form-row">
<label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
<input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
</div>
<div class="form-row"></div>
<div class="driver-access-copnditional">
<div class="form-row">
<label for="driver_username">Username</label>
<input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
</div>
<div class="form-row">
<label for="driver_password">Password</label>
<input id="driver_password" placeholder="***" type="password" name="driver_password">
</div>
</div>
<div class="clear"></div>
<input type="submit" class="submitNewDriver button green" value="Submit" />
</form>
</div>
I want to enable textbox when checkbox is checked form content load from ajax page in modal popup but its not working and not showing any error in browser console.
function cash(cash) {
if ($(cash).is(':checked')) {
$('#cashAmount').attr("disabled", false);
} else {
alert("checkbox is not checked");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash" onclick="cash(this)">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" name="cashAmount" id="cashAmount" class="form-control" disabled>
</div>
What you need to do is this:
function cash(cash) {
var getthevalue = $(cash).attr('id');
if (getthevalue.is(':checked')) {
$('#cashAmount').attr("disabled", false);
}
else{
alert("checkbox is not checked");
}
}
This is because when you pass:
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash" onclick="cash(this)">
You bass the html element and not the id, your This is referring to the entire strong tag.
So in your method:
var getthevalue = $(cash).attr('id');
Will get the id attribute of your input tag, which is passed through your this:
onclick="cash(this)"
With pure javascript:
function cash(cash){
if(cash.checked ===true) document.getElementById('cashAmount').removeAttribute('disabled');
else document.getElementById('cashAmount').setAttribute('disabled', 'disabled');
}
when checkbox is checked form content load from ajax page in modal
popup
It seems you need to delegate the event
// Using change event handler and delegating the event using on from body
// to target element
$('body').on('change', '#cash', function() {
// checking if it is checked
if (this.checked === true) {
$('#cashAmount').attr("disabled", false);
} else {
$('#cashAmount').attr("disabled", true);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" name="cashAmount" id="cashAmount" class="form-control" disabled>
</div>
Please check this fiddle
https://jsfiddle.net/bimalkumarh/d1qxv247/
$("#cash").on('change',function() {
if (this.checked) {
$('#cashAmount').attr("disabled", false);
} else {
alert("checkbox is not checked");
}
});
Hope this helps.
Following code using Javascript
function cash(x) {
if (document.getElementById('cash').checked) {
document.getElementById("cashAmt").disabled = false;
} else {
document.getElementById("cashAmt").disabled = true;
}
}
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" id="cash" onclick="cash(this)">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" id="cashAmt" class="form-control" disabled>
</div>
Following code uses jquery
function cash(cash) {
if ($(cash).is(':checked')) {
$('#cashAmt').attr("disabled", false);
}
else{
$('#cashAmt').attr("disabled", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" id="cash" onclick="cash(this)">
</div>
<div class="col-md-6 col-sm-6 custom_field"> <!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" id="cashAmt" class="form-control" disabled>
</div><!-- End custom_field-->
$("#cash").on('change', function(){
$('#cashAmount').attr("disabled", !$(this).is(':checked'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" name="cashAmount" id="cashAmount" class="form-control" disabled>
</div>
You can use disabled config to disable textbox on click of checkbox.
function handleChange(el) {
var name = document.getElementById('name');
name.disabled = !el.checked;
name.focus()
}
<label><input type='checkbox' onclick='handleChange(this);'>Checkbox</label>
<br>
<label>Name : <input disabled=true type='text' id='name'></label>
Smallest, simplest and easiest thing to do, using the true/false state of checkbox thereby avoiding if-else:
$('body').on('change', '#cash', function() {
$('#cashAmount').prop("disabled", !this.checked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field-option">
<strong>Cash</strong> <input type="checkbox" name="cash" id="cash">
</div>
<div class="col-md-6 col-sm-6 custom_field">
<!-- custom_field -->
<span><strong>Amount <i>*</i></strong></span>
<input type="text" name="cashAmount" id="cashAmount" class="form-control" disabled>
</div>
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 created a two javascript.
1.When i click the checkbox the input field is appeared and when i unchecked input field is disappeared.
2.Second is when i click the add more items the all fields are created one more time.
Now the problem is when is created a second and more items the checkbox is not working.
HTML Code:
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Food Name" name="Name1" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Name</label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="field-value" placeholder="Description" style="width:120%;" required>
<label class="sr-only" for="field-value">Description</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<select id="select1" name="select1" style="width:130%;" class="form-control" required>
<option value=""></option>
<option value="1">Food Type 1</option>
<option value="2">Food Type 2</option>
<select>
<label for="select1">Food Type</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" value="" class="form-control" data-role="tagsinput" placeholder="Tags" />
<label class="sr-only" for="field-tags">Tags</label>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Price" name="price" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Price</label>
</div>
</div>
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
<div class="col-md-3">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" id="trigger" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields">
<input type="text" id="hidden_field" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-100px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
</div>
</div>
<button class="btn btn-icon-toggle btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove"> <span class="md md-delete"></span> </button>
<button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add"> Add More Items </button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
</div>
<!-- /div.col-md-12 -->
</div>
<div class="form-group">
<button type="button" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary">Submit Items</button>
</div>
<!--end .form-group -->
</div>
Checkbox Js:
<script type="text/javascript">
$(function() {
// Get the form fields and hidden div
var checkbox = $("#trigger");
var hidden = $("#hidden_fields");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
// Make sure that the hidden fields are indeed
// hidden.
hidden.hide();
$("#hidden_field").val("");
}
});
});
$(function() {
var checkbox = $("#trigger2");
var hidden = $("#hidden_fields2");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$("#hidden_field2").val("");
}
});
});
</script>
Add more items JS:
$(function() {
// Remove button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]', function(e) {
e.preventDefault();
$(this).closest('.form-inline').remove();
});
// Add button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="add"]', function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function() {
$(this).val('');
});
container.append(new_field_group);
});
});
page Screenshot:
There are a couple of problems here:
You are cloning elements and then trying to access them via the same ID (you should use class)
Your functions don't target just clicked element but any element with the selector.
You are cloning elements so you need bind the click event to a non-cloned element: e.g. via $(document).on
I've updated some of your code to demonstrate what I'm talking about. In the html, I've added classes in the trigger2 and hidden_fields2 elements and display:none style to the hidden fields so they are hidden by default.:
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
In the javascript, I've changed the function to run from a $(document).on event bind and used the element class instead of the id. I've also changed the code so it only effects the checkbox you change and the closest hidden elements:
$(function() {
$(document).on('change', '.trigger2', function(){
var checkbox = $(this);
var parent = checkbox.closest('.form-inline');
var hidden = parent.find(".hidden_fields2");
hidden.hide();
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$(".hidden_field2").val("");
}
});
});
You need to use the same logic on your other functions and inputs.
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')"/>