Issue with checkbox listener in multifield - javascript

I have a multifield component with a 1 checkbox in each item. I am adding a listener so that if one check box is checked all others should be unchecked automatically. I am writing the listener with jquery. When I check the next item in multifield, the functionality works fine, however, it doesn't work when I check a previous checkbox in the multifield item.
whats around with this code:
Check =
function(e) {
$("input[name='./isActive']").each(function () {
if($(this).attr('id') !== e.id && $(this).attr('checked') && e.getValue() !== false) {
if (confirm('Do you want to replace Alert message?')) {
$(this).removeAttr('checked');
return;
} else {
e.setValue(false);
return;
}
}
});
}
Thanks in advance

Hope this resolve your issue
JS FIDDLE
$(document).ready(function(){
$('.multiChecks').change(function() {
if($(this).prop('checked')){
$('.multiChecks').not(this).removeAttr('checked');
}
}); });

$(document).ready(function(){
$('.multiChecks').change(function() {
var index = $( '.multiChecks' ).index( this );
if($(this).prop('checked')){
$('.multiChecks:gt('+index+')').removeAttr('checked');
$('.multiChecks:;t('+index+')').removeAttr('checked');
}
});
});

Related

jQuery on click toggle event

I've made a function which selects an item when you click on it. And made it so when I've selected more than 10, it stops adding to selectedItems.
But when 10 items is selected, I can still toggle the class d-items-selected by clicking. How do I disable that? I've tried to use stop() but that canceled the hole thing, so I couldn't 'de-select' the items again.
$(document).ready(function(){
$('.d-items').on('click', function(e){
e.preventDefault();
$(this).toggleClass('d-items-selected');
var selectedItems = $('.d-items-selected').length;
if(selectedItems > 10) {
$('.d-items').finish();
} else {
$('#ItemsSelected').html(selectedItems);
}
});
});
You can disable controls which are not selected. Something like this.
$(document).ready(function(){
$('.d-items').on('click', function(e){
e.preventDefault();
$(this).toggleClass('d-items-selected');
var selectedItems = $('.d-items-selected').length;
if(selectedItems > 10) {
//do not allow to select
$(this).removeClass('d-items-selected');
} else {
$('#ItemsSelected').html(selectedItems);
}
});
});
Would unbinding the click event work for you?
e.g.
if(selectedItems > 10) {
$('.d-items').unbind("click");
}
Otherwise you can rebind it to a different function after selectedItems > 10, or anything really.
edit: It would help if you clarified what exactly you want to happen on click after selectedItems > 10
Maybe try
e.stopPropagation() or
e.stopImmediatePropagation()
I tried to figured out a solution:
$(function () {
$('.d-items').on('click', function(e) {
e.preventDefault();
var selectedItems = $('.d-items-selected').length;
//if selected items are less then 10
// or the current item is already selected you can deselect
if (selectedItems<10 || (selectedItems>=10 && $(this).is('.d-items-selected'))) {
$(this).toggleClass('d-items-selected');
}
if (selectedItems > 10) {
$('.d-items').finish();
} else {
$('#ItemsSelected').html(selectedItems);
}
});
});
$(document).ready(function(){
var i=0;
$('.d-items').on('click', function(e){
e.preventDefault();
if($(this).hasClass('d-items-selected')) {
$(this).removeClass('d-items-selected');
i--;
console.log("deleted"+i);
}
else {
if(i<10) {
$(this).addClass('d-items-selected');
i++;
console.log("added"+i);
}
}
})
});

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 - Enable/Disable a button following checkboxes state

I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?
It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.
Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});
// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;
Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("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/

jQuery: FadeIn a selected value on click

I have a selected box with 5 values. I'm trying to fadeIn inputs of what is selected in the box. For example: If input1 is selected, fade in input1 on click.
Here is what I'm trying to do:
$(document).ready(function(){
$('.btn').click(function() {
if($("#selectbox").value == 'Input1') {
$(".input1").show();
} else if($("#selectbox").value == 'Input2') {
$(".input2").show();
} else if($("#selectbox").value == 'Input3') {
$(".input3").show();
} else if($("#selectbox").value == 'Input4') {
$(".input4").show();
} else if($("#selectbox").value == 'Input5') {
$(".input5").show();
}
}
});
And here is a NOT working fiddle:
http://jsfiddle.net/rzMHJ/
Your code have two errors and that's why its not working.
$("#selectbox").value should be $("#selectbox").val()
you have not closed your click event with );
Also its much better to use switch case in this example.
Working Demo: http://jsfiddle.net/naveen/Zn2yy/
Update (based on Nick Cravers comment)
For this particular scenario you could simplify code a lot like this.
Demo: http://jsfiddle.net/nick_craver/BWacA/
There are two problems with your code that is causing it to fail.
First, replace .value with the jQuery function val().
Second, add ); to the second to last } at the end.
Here is working refactored code:
$(document).ready(function() {
$('.btn').click(function() {
var show = "." + $("#selectbox").val().toLowerCase();
$(show).fadeIn();
});
});

Categories