We Keep Coding

jQuery group of checkbox issue

I have two group of checkbox newBuilding & oldBuilding.
Idea over here is I can select checkbox only one of the group.
In each group there is checkbox name other area, so I when click on it, it will show and hide textbox next to it.
Now to achieve first point, lets for example that already we have oldBuilding checkboxes are checked and I if I click one of the newBuilding checkbox then it will remove the check from oldBuilding group but newBuilding checkbox will not get checked but just get focus, I have to click again to check.
What I found out that above issue happen when I call trigger event. How can I overcome the issue
Code for other area
$("#chkOldBuildingOtherAreas").change(function () {
if ($("#chkOldBuildingOtherAreas").is(":checked"))
$("#txOldOtherAreas").show();
else
$("#txOldOtherAreas").hide();
});
$("#chkNewBuildingOtherAreas").change(function () {
if ($("#chkNewBuildingOtherAreas").is(":checked"))
$("#txNewOtherAreas").show();
else
$("#txNewOtherAreas").hide();
});
Code for removing check mark from other groups
$("input[name='oldBuilding']").change(function () {
if ($("input[name='newBuilding']:checked").length > 0) {
$("input[name='newBuilding']").removeAttr('checked');
$("#chkNewBuildingOtherAreas").trigger("change");
}
});
$("input[name='newBuilding']").change(function () {
if ($("input[name='oldBuilding']:checked").length > 0) {
$("input[name='oldBuilding']").removeAttr('checked');
$("#chkOldBuildingOtherAreas").trigger("change");
}
});
My jsfiddle
https://jsfiddle.net/milindsaraswala/wchrwjnx/

https://jsfiddle.net/1ny36nwL/4/
var groups = ['.oldGroup', '.newGroup'];
$(groups.join(',')).find('input[type=text]').hide();
function resetGroup(selector) {
//clear and hide texts
$('input[type=text]', selector).val('').hide();
//uncheck boxes
$('input[type=checkbox]', selector).removeAttr('checked');
}
$("input[name='oldBuilding']").change(function(e) {
if (this.id == 'chkOldBuildingOtherAreas') {
$("#txOldOtherAreas").toggle();
}
resetGroup('.newGroup');
});
$("input[name='newBuilding']").change(function(e) {
if (this.id == 'chkNewBuildingOtherAreas') {
$("#txNewOtherAreas").toggle();
}
resetGroup('.oldGroup');
});
as you can see I added groups var which can contain multiple groups (not only two), but code need to be changed a little more for that to work
you need to detect id/class of current group by something like $(this).closest('.form-group').id and reset every group except current group. in that way you can leave only one change function which will be universal
oh and you also need to add some class for checkbox that contain text input, and if that checkbox is clicked, trigger toggle for input. so it won't be if (this.id == 'chkNewBuildingOtherAreas') { but something like if ($(this).hasClass('has-input'))

Try replacing this in your code. It should work.
$("#txOldOtherAreas").hide();
$("#txNewOtherAreas").hide();
$("input[name='oldBuilding']").change(function (e) {
$("input[name='newBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkOldBuildingOtherAreas") {
$("#txOldOtherAreas").show();
$("#txNewOtherAreas").hide();
} else {
$("#txNewOtherAreas").hide();
}
});
$("input[name='newBuilding']").change(function (e) {
$("input[name='oldBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkNewBuildingOtherAreas") {
$("#txNewOtherAreas").show();
$("#txOldOtherAreas").hide();
} else {
$("#txOldOtherAreas").hide();
}
});

You can try following code to fix the problem (Tested in fiddle):
$('#txNewOtherAreas, #txOldOtherAreas').hide();
$('input[name="oldBuilding"]').on('click', function(){
if($('input[name="newBuilding"]').is(':checked')){
$('input[name="newBuilding"]').removeAttr('checked');
$('#txNewOtherAreas').hide();
}
});
$('input[name="newBuilding"]').on('click', function(){
if($('input[name="oldBuilding"]').is(':checked')){
$('input[name="oldBuilding"]').removeAttr('checked');
$('#txOldOtherAreas').hide();
}
});
$('#chkNewBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txNewOtherAreas').show();
} else {
$('#txNewOtherAreas').hide();
}
});
$('#chkOldBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txOldOtherAreas').show();
} else {
$('#txOldOtherAreas').hide();
}
});

jquery form check before submit with select name array

I'm having a hard time with this quick validation i want in place...but i think it's not validating properly because of my select name arrays and i'm not sure how to go about this.
How it should work:
- If stat holiday box is checked for that day && if any Lieu hours are selected for that day give alert error and stop form submission.
My jsfiddle: http://jsfiddle.net/4bgYj/3/
my jquery:
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
var lieuhrs = $(".lieutimehours").val();
$('.lieutimehours').each(function(i, obj) {
if ($("#statholidaycheck").is(":checked") && lieuhrs > 0) {
alert("cannot process: " + lieuhrs);
return false;
}
}
});
});

Let me give you a more user-friendly approach for your problem:
If stat is selected simply disable the form input for lieu hours.
With this you won't have to check anything before submitting the form and the user can't accidentally select a value in lieu hours.
It still needs to be updated to your markup, but the idea is basically:
var stat = $('.stat');
stat.change(function() {
var e = $(this);
var f = e.parent().find('.lieu');
if (e.is(':checked')) {
f.prop('disabled', true);
} else {
f.prop('disabled', false);
}
});
Demo
Try before buy

First, you're missing a );...
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
var lieuhrs = $(".lieutimehours").val();
$('.lieutimehours').each(function(i, obj) {
if ($("#statholidaycheck").is(":checked") && lieuhrs > 0) {
alert("cannot process: " + lieuhrs);
return false;
}
}); // missing ); here. <--------------
});
});
Try it after adding that and you'll find it works for the first checkbox. But select a different checkbox and it will fail. In HTML, you will want to use unique ids to reference an element. What I would do is change your HTML to put a css class on the TR tag, and then look at the contained elements.
<tr class='line'>
<td> <input type='checkbox' class='isHoliday'/> </td>
<td> <select class='lieuHours'>options...</select> </td>
</tr>
and in your script...
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
$('.lines').each(function(i, obj) {
var lieuHours = $(this).find(".lieuHours").val();
if ($(this).find(".isHoliday:checked") && lieuHours > 0) {
alert("cannot process: " + lieuhrs);
return false;
}
}); // missing ); here. <--------------
});
});

You didn't approach the issue properly, the selectors should not be global but specific to the loop you are doing:
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
$('.lieutimehours').each(function(i, obj) {
var lieuhrs = $(this).val();
if ($(this).closest('tr').find('#statholidaycheck').is(":checked") && parseFloat(lieuhrs) > 0) {
alert('works');
return false;
}else{
alert('fail')
}
});
});
});

Jquery validation not working properly?

I am trying to do required validation in a asp.net page.
I have multiple controls that will be hidden and displayed.
Controls like checkboxlist,dropdownlist,multiselectedlistbox.
I am using a css class called required attaching to all these controls to check the validation.
I am trying to check if each control has value or not but my code is checking each options with in each controls.
I am really not finding a way not a jquery expert just a novice...
Here is my code any ideas anyone please....
$("input[type='submit']").click(function () {
if ($(this).val() != 'Back') {
var names = [];
var info=" ";
$('.required input').each(function () {
var control = $(this);
if (control.is(':enabled')) {
names[$(this).attr('name')] = true;
}
});
$('.required option').each(function () {
var control = $(this);
if (control.is(':enabled')) {
names[$(this).attr('name')] = true;
}
});
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if ((radio_buttons.filter(':checked').length == 0) ||(radio_buttons.filter(':selected').length == 0)) {
info += radio_buttons.closest("table").find('label').html()+"</br>";
}
}
if (info != " ") {
$("#validation_dialog p").html(info);
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
}
});
here is a fiddle for it...
http://jsfiddle.net/bDmgk/35/

I think what you want is:
$(".required input[type='radio']:checked").each(function(){
});
instead of :
$(".required option").each(function(){ ... });

Hi I made some changes to your fiddle basically I checked for the inputs inside each column like this and then I added them to your names array.
Using
$('table.required:eq(0) input:checked')
I you can got all the inputs that are checked on the first column if the lenght of the array returned is 0 then no input is checked, i't the same procedure for the other ones.
An yes those input names are weird.
Check this fiddle
JSFiddle

html+javascript: How to disable null option in dropdownlist on some condtition

I have html page with a dozen dropdownlinst
One of them is
#Html.DropDownListFor(model => model.PrimaryNetworkInt, new SelectList(ViewBag.AvailableNetworks, "ID", "Name"), "Offline")
Second one store some other value, and when I change it to "AAA" I must disable in the fist one ability to choose NULL-oprtion (i.e. "Offline") (and return it back if was selected something else)
Select logic works fine:
$('#SecondDDList').change(function () { SecondDDListChanged(); });
var SecondDDListChanged() = function(){
//...
if ($('#SecondDDList').val()==-1){ //-1 i.e == "AAA" in my example
//Here i need logic to disable NULL selection
} else {
//Here i need enable NULL option
}
}
What is better way to do it? May be something like:
$("#PrimaryNetworkInt option[value=null]").attr("disabled", "disabled");
Any suggestion?

You can use the methods .show() and .hide() for be shure the user can (or can not) select the value
$("#PrimaryNetworkInt").change(function() {
if ($(this).val()==-1){ //-1 i.e == "AAA" in my example
$("#PrimaryNetworkInt option[value='null']").hide();
} else {
$("#PrimaryNetworkInt option[value='null']").show();
}
});

jQuery(function () {
jQuery('#SecondDDList').find("option").each(function () {
if (jQuery(this).val() == -1 || jQuery(this).val() == "null" ) {
jQuery(this).attr("disabled", true);
}
});
});

To disable particular option just set its disabled attribute.
var SecondDDListChanged() = function(){
//...
if ($('#SecondDDList').val()==-1){ //-1 i.e == "AAA" in my example
$("#optionId").attr("disabled", "disabled");
} else {
$("#optionId").removeAttr("disabled", "disabled");
}
}

Add class if one select's value is #

$(document).ready(function () {
$("#bcscan").submit(function (e) {
e.preventDefault();
if($("select").val() === '#') {
$(this).addClass("warning");
}
else {
ajaxPost();
}
});
});
I'm using following function, how can I modify it to add class warning, if one of select element's value = "#"?
Currently it's adding warning class to all selects

I think this may be what you want:
$('select').filter(function() {
return ($(this).val() === '#');
}).addClass('warning');
That selects all select elements, filters it down to those elements whose current value is equal to #, then adds the warning class to that subset.
I'll leave my original answer here, though given the changes to the question it's likely no longer relevant. This is my last stab at guessing what it is you want - if this is useful to you, great; if not, oh well.
$(document).ready(function () {
$("#bcscan").submit(function (e) {
e.preventDefault();
var doAjaxPost = true;
$('select').each(function() {
if($(this).val() === '#') {
doAjaxPost = false;
$(this).addClass('warning');
}
});
if(doAjaxPost) {
ajaxPost();
}
});
});
That checks all select elements when the form is submitted - if any of them have a value of # it adds the warning class to that select element. If none of them have a value of # it goes ahead and calls the ajaxPost() function.

$('select').change(function (event) {
if ($(this).val() === '#') $(this).addClass('warning');
});
this is populated with the element that fired the event. In this case the select.
Demo: http://jsfiddle.net/TimWolla/tNhKe/
Edit to match the question:
$(document).ready(function () {
$("#bcscan").submit(function (e) {
e.preventDefault();
var invalidCount = $('select').filter(function() {
return ($(this).val() === '#');
}).addClass('warning').length;
if (invalidCount == 0) {
alert('valid');
}
});
});
Demo: http://jsfiddle.net/TimWolla/QxBH9/

if($("select:selected").val() == '#') {
$("select").addClass("warning");
}
http://api.jquery.com/selected-selector/