I am facing a problem and I want your help please.I have created two individual forms.The 1st has two input text and the 2nd has some checkboxes.I want on load page the 2nd to be disabled and when a checkbox is checked then the form will be enabled and the 1st will be disabled.If there isn't checkbox checked then the 1st is enabled and the 2nd disable.I hope you understand.My English isn't perfect..
Here is the jQuery I use:
//eksargirwsh is the 2nd form (with checkboxes)
//prosthiki is the 1nd form (with two input text)
$(document).ready(function() {
$('#eksargirwsh :not([type=checkbox])').prop('disabled', true);
});
$(":checkbox").change(function(){
if (this.checked) {
$('#eksargirwsh :not([type=checkbox])').prop('disabled', false);
$('#prosthiki').prop('disabled', true);
}
else{
$('#eksargirwsh :not([type=checkbox])').prop('disabled',true);
$('#prosthiki').prop('disabled', false);
}
}) ;
ERRORS
On load page the 2nd isn't disabled as expected
If I checked two or more checkbxes in row and unchecked them in the opposite way the 2nd form becomes disabled fact I don't want
This is the solution I found:
$(document).ready(function() {
$('#eksargirwsh :not([type=checkbox])').removeAttr('disabled');
});
$(":checkbox").change(function(){
//if (this.checked){
if ($('form input[type=checkbox]:checked').size()>=1){
$('#eksargirwsh :not([type=checkbox])').removeAttr('disabled');
$('#prosthiki').prop('disabled', true);
}
else{
$('#eksargirwsh :not([type=checkbox])').prop('disabled',true);
$('#prosthiki').removeAttr('disabled');
}
});
And I put this on input :
disabled="disabled"
.prop('disabled',false) is not the right way to remove the disabled attribute. Please use .removeAttr('disabled') instead.
First of all, remember to init event handlers inside $(document).ready function
Secondly, to improve performance, remember to cache selectors.
Then, to make it cleaner to understand, move disable/enable logic to separate function:
$(document).ready(function() {
var $eksargirwsh = $('#eksargirwsh');
var $prosthiki = $('#prosthiki');
var $eksargirwshElements = $eksargirwsh.find('input:not([type=checkbox]), select, textarea, button');
var $prosthikiElements = $prosthiki.find('input, select, textarea, button');
$eksargirwsh.on('change', 'input[type=checkbox]', onCheckboxChange);
disableElements($eksargirwshElements, true);
function onCheckboxChange(){
if( $eksargirwsh.find('input:checked').size() == 0 ){ // no checked inputs
disableElements($eksargirwshElements, true); // disable #2
disableElements($prosthikiElements, false); // enable #1
} else {
disableElements($eksargirwshElements, false); // enable #2
disableElements($prosthikiElements, true); // disable #1
}
}
function disableElements($elements, state){
$elements.attr('disabled', state);
}
});
if you don't care so much for readability onCheckboxChange can be shortened to
function onCheckboxChange(){
var zeroChecked = $eksargirwsh.find('input:checked').size() == 0;
disableElements($eksargirwshElements, zeroChecked);
disableElements($prosthikiElements, !zeroChecked);
}
Related
I have the following question, when I change the value of the combobox, the checkboxes are still marked, with prop the values are unmarked, but this time it does not work, the idea is to reset the marked checkboxes when the value of the checkbox is changed.
Regards.
var cambio = $("#cmbKit").on('change', function () {
var checkPoint = !$(this).data('checked');
$('#tblCajas input[type="checkbox"]').each(function () {
if (checkPoint == true) {
$(':checkbox').prop('checked', false);
$("input[type='checkbox']").prop('checked', false);
}
});
});
if (cambio) {
selectedBox = 0;
$('#divCalculos').hide();
$('#btnPlanificar').hide();
}
As you want to reset every checkbox on change event of combobox, you can use below code -
$("#cmbKit").change(function() {
$("input[type='checkbox']").prop('checked', false);
});
You shouldn't use any if condition as you are going to reset it after every change event.
Please note that given code will reset all checkboxes on page, add table selector as well in case you have multiple table with different content.
Hope this helps.
I have a text input in html that is affected by a function exectued by .change() events from different radios and checkboxes. I'm trying to make it so that if a user types into the input, this function will no longer run when a .change() event happens in the aforementioned radios and checkboxes (the user must still be able to use these radios and checkboxes). However, if the user leaves the input blank and clicks away, the script will run again. I hope is possible.
Here is my take on this so far:
Using.prop('diabled' isnt viable because it completely disables the input, making the user unable to type in it, so I need another solution.
$(function() {
$('#burger-navn').on('input', function() {
$("#burger-navn").prop('disabled', true);
});
//When the input (#burger-navn) is typed into it should be "disabled"
$('#burger-navn').focusout(function() {
if ($(this).val().length == 0) {
$("#burger-navn").prop('disabled', false);
}
});
//But if its clicked out of while its blank, it should be able to run again.
$("#okseinput, #laksinput, #kyllinginput, #vegetarinput").change(function() {
if (!$("#burger-navn").not(':disabled')) { //condition that tests
navngenerator();
}
});
});
To solve this I simply created a separate input tag that I could add and remove disabled attribute from, and check if it has that attribute.
So in html:
<input id="burger-navn" type="text"/>
<input id="toggle" disabled="disabled" style="display:none"/>
jQuery:
var previousValue = $("#burger-navn").val();
$("#burger-navn").keyup(function(e) {
var currentValue = $(this).val();
if(currentValue != previousValue) {
previousValue = currentValue;
$("#toggle").prop('disabled', false);
}//This function will remove disabled from #toggle, when a user types into #burger-navn
});
$('#burger-navn').focusout(function() {
if ($(this).val().length == 0) {
$("#toggle").prop('disabled', true);
}
});
if ($("#toggle").is(':disabled')) {
navngenerator();
}
$("#okseinput, #laksinput, #kyllinginput, #vegetarinput").change(function() {
if ($("#toggle").is(':disabled')) {
navngenerator();
}
});
$(selector).on('change', function(event){
event.preventDefault();
event.stopPropagation();
// the selected field no longer does anything on change
});
is that what you are looking for?
I have the following code:
$(":input").bind("keyup change", function(e) {
var comboVal = $('.emailrequerido1').val()+$('.emailrequerido2').val()+$('.emailrequerido3').val()+$('.emailrequerido4').val()+$('.emailrequerido5').val();
if(comboVal == 'nullnull' || comboVal == ""){
$("#enviarForm").attr('disabled', true);
}else{
$("#enviarForm").removeAttr('disabled');
}
});
What I am trying to accomplish is that when you select a memorized value from the input box by double clicking in the box a history of inputs shows (these values are saved by the browser (I believe)) and if you choose one of these and the field has that text you selected the button should enable.
Here is a JSFiddle example: JSFiddle example
In the example I added a value to the first field since these dont memorize as I expalined before to show a demonstration of what I mean.
I have cleaned up the code a bit: http://jsfiddle.net/kam5B/1/
I've swapped the classes and ids so that the ids are unique, and the classes are common.
Here is a checkEmails function that runs the validation and enables/disables the checkbox.
checkEmails is run every time an input changes, and when the page loads the first time:
$(document).ready(function () {
function checkEmails() {
var nonempty = $('form .email_contactopadrino').filter(function() {
return $(this).val() != '';
});
if (nonempty.length) {
$('#enviarForm').removeAttr('disabled');
}
else {
$('#enviarForm').attr('disabled', true);
}
};
$('form').on('keyup change', '.email_contactopadrino', checkEmails);
checkEmails();
});
In my VB.NET project, I have a UI with some text input fields and a save/submit button. I want the save button to be in a disabled state on page load, and remain that way until a change is made to one of the inputs. And the save button should get disabled again if the values entered by the user are the same as they were at page load. So basically, the save button should be enabled only when there is an actual change.
How can I do this using jquery?
$(':input').change(
function(){
$("#submitButtonId").prop("disabled",false);
}
);
since you said it is dynamic, use on.
$(document).on("change", ":input",
function(){
$("#submitButtonId").prop("disabled",false);
}
);
You can handle that in the change event
$('input[type="text"]').on('change', function() {
// Change event fired..
$('input[type="submit"]').prop('disabled', false);
});
//This will bind all existing and dynamically added selects onChange to the handler
$(document).on('change', function(e) {
onChangeHandler();
}
// handle the event
function onChangeHandler() {
if (checkValues()) {
$('#yourButtonId').prop("disabled", false);
}
else {
$('#yourButtonId').prop("disabled", true);
}
}
// check all values against originals - data-* attributes are a good way to store data on
// an element. So have you can have:
<select id="id1" data-originalvalue="myValue"></select>
// compare the current value to the original value - if any one of them differ, return
// true
function checkValues() {
$.each($('select[data-originalvalue]'), function() {
if ($(this).val() !== $(this).attr(data-originalvalue){
return true;
}
return false;
});
}
this is my js fiddle link :
http://jsfiddle.net/m4tyC/
i have multiple select tags and i want to validate on submit if for example
at least if one of the size1 and color1 and Qty1 is selected in the first group and if one is selected i want to validate the others and in the same time if at least one group is selected the form can submit and if the user selected one option from the second group i do the same validation type for the second group of size2 , color2 , ...
i appreciate any help with that , i use jquery in my project
Try this (form will submit only when at least one row is completely selected)
$(function(){
$('#frm_productOrder').on('submit', function(e){
e.preventDefault();
var f=$(this);
var invalid=false, selected=0;
$('.selects').each(function(){
var row=$(this);
var items=0;
$('select', row).each(function(){
var t=$(this);
var selectedIndex=t.prop("selectedIndex");
if(selectedIndex) items++;
});
if(items==3) selected++;
if(items>0 && items<3) invalid=true;
items=0;
});
if(selected>0 && !invalid) f[0].submit();
else alert('Please fill up the form correctly');
});
});
DEMO.
Here is some JQuery code. You can figure out how to submit the form on success by yourself:
$(document).ready(function(){
$("form").submit(function(event)
{
var is_valid = true;// for avoiding alerting in loop
event.preventDefault();
$(this).find("select").each(function(){ //usually default is the first
if(!$(this).attr("selected"))
{
$("#"+$(this).attr("id")).each(function()
{
if($(this).find("option:first").attr("selected"))
{
is_valid = false;
}
});
}
});
if( !is_valid )
alert("Please make sure all values are set for row!");
});
});
See this jsFiddle. There are some bugs too, but you can work that out.