Add active class without any click or pressing any key(checkbox) - javascript

I want the checkbox field should add an active class to its label if it is checked. I have done everything like when check it adds class to label and when not checked it does not add the active class.
But my point is when the code is
<label class="define--area--label"><input type="checkbox" checked ><label>
then it does not add the active class to the label.
here is my code
$('.define--area--label > input').change(function() {
if ($(this).is(':checked')) {
$(this).parent().addClass('active');
} else {
$(this).parent().removeClass('active');
}
});
Full Example

I think you have to trigger change event through JavaScript after document loaded.
$(document).ready(function(){
$('.define--area--label > input').change(function() {
if ($(this).is(':checked')) {
$(this).parent().addClass('active');
} else {
$(this).parent().removeClass('active');
}
});
$('.define--area--label > input:checked').trigger('change');
})

$(document).ready(function(){
$('.define--area--label > input').each(function() {
if($(this).is(':checked')){
$(this).parent().addClass('active');
}
});
});

Related

Bind functions events to a checkbox/label on change function

I am trying to add some functionality to the following component, basically when the user clicks on the parent "li label checkbox" this should check/unchecked the > "ul li label checkboxes", the problem is that I am using the label to trigger show/hide the next "ul" and can't bind another function, the ideal escenario will be as follow:
click on li label {element} > slidedown the next ul
click on li label {Checkbox} > check/uncheck the next ul checkboxes childs
I created a jsfiddle at this point the html markup cannot be changed :/
$(document).ready(function(){
function dropdown() {
$("#sidebarNav label").not("input[type='checkbox']").on('change', function (e) {
if (jQuery(this).parent().has("ul")) {
e.preventDefault();
}
$(this).next('ul').slideToggle('fast');
$(this).find('i').toggleClass('ion-plus ion-minus');
//console.log(this);
if (jQuery(this).hasClass('has-dropdown')) {
$(this).find('input').prop('checked', true);
//var item = $(this).find('input');
//console.log(item);
}
var checkbox = $(this).find('input').is(":checked");
//console.log(checkbox);
if(checkbox) {
//console.log("checked.");
} else {
//console.log("unchecked.");
}
});
} dropdown();
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
Try
function dropdown() {
$("#sidebarNav li").has("ul").find(' > label input').on('change', function (e) {
var $ul = $(this).parent().next();
$ul.slideToggle('fast');
$ul.find('input').prop('checked', this.checked);
$(this).prev('i').add($ul.find('i')).toggleClass('ion-plus', this.checked).toggleClass('ion-minus', !this.checked);
});
}
Demo: Fiddle

Click one item on a row only

Is it possible to disabled the other buttons in a row, when I have selected at least one?
$('.bet-offer div.option').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
$(this).addClass('selected');
}
});
The result should be the user can click on any buttons in a row, but once clicked, the other items on that row should be disabled already. However, the user can still select buttons from the other items in other rows.
Here's the sample fiddle: http://jsfiddle.net/1vuf1gm7/3/
Thanks!
buttons are nothing but siblings of each other in parent div. you can use .siblings() to target other button and remove the class selected from it.
also you should use .toggleClass() instead of add/remove with hasClass condition:
$('.bet-offer div.option').click(function(){
$(this).siblings('.option').removeClass('selected')
$(this).toggleClass('selected')
});
Working demo
Try something like this:
$('.bet-offer div.option').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$('.bet-offer div.option.disabled').removeClass("disabled");
} else {
$(this).addClass('selected');
$('.bet-offer div.option:not(.selected)').addClass("disabled");
}
});
This will add a disabled class to all the non-selected options.
This will disable the other buttons in the same row while one button has the class selected:
$('.bet-offer div.option').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).siblings().css('pointer-events', 'auto');
} else {
$(this).addClass('selected');
$(this).siblings().css('pointer-events', 'none');
}
});

How to Add and remove attribute if found specific class

I have some list items and if I click any list item it become selected by adding class .selected
If I click outside of the list item all list item become unselected. FIDDLE
I also have one button initially disabled. I wanted to make the button active by removing "disabled" attribute when list items are selected.
Again if I click outside all list item should be unselected and button become disable again.
How I can do this? Any help will be appreciated.
JS
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
}
});
All you're missing is how to enable/disable your button and that is
$('.load-table').prop('disabled',false); // or true to disable
So just plug this in as required
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
http://jsfiddle.net/has9L9Lh/22/
Use .hasClass() instead and set else condition and to disable and enable the button use .prop()
$(".list-group-item").click(function(e) {
e.stopPropagation();
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).hasClass("list-group")) {
$('.list-group-item').removeClass('selected');
}
else{
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
Demo
Use attr() property of jquery.
$(".list-group-item").click(function () {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
if ($("button").attr("disabled") === "disabled") {
$("button").attr("disabled", false);
}
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$("button").attr("disabled", true);
}
});
Above code should work. When the item is clicked then check if the button is still disabled. If it is then enable the button.
Same goes when the user click outside the list.
Fiddle

Watch elements count by class using jQuery

I have simple HTML:
ul > li > button
And have some JavaScript code:
$('.side-filters .filters_list li').each(function(){
$(this).find('button').click(function(){
var arrList = $('.side-filters .filters_list li .active').map(function(){
return $(this).attr('id');
}).get();
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
If I click on a button, add class 'active' to the button, and if clicked again, remove class.
I need live count elements witn class 'active'. If there is at least one given ul class 'someclass' and if I click again and have no elements with class active, remove 'someclass' from the Ul.
How can I do this?
There is no need to loop through the elements and add a click to every button. Add one listener.
//listen for click on a button
$('.side-filters', "click", ".filters_list li button", function(){
//toggle the active class on the button
var button = $(this).toggleClass("active");
//see if anything is selected
var hasSelection = $('.side-filters .filters_list li .active').length > 0;
//toggle a class on the closest ul based on if anything is selected.
button.closest("ul").toggleClass("someclass", hasSelection);
});
References:
toggleClass(class [, switch])
.closest( selector )
You can add this function ()
function someclass () {
var count = $('.active').length;
if (count >= 1) {
$('ul').addClass('clasHere')
} else {
$('ul').removeClass('clasHere')
}
}

Disable anchor with onclick

I have a problem to disable my anchor when its being pressed.
HTML:
<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'>
<i class='polygon_mark'></i>
</a>
<a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'>
<i class='square_mark'></i>
</a>
jQuery
$('.square_mark').click(function () {
if(!$(this).hasClass('active')) {
$(this).addClass('active');
$('.polygon_mark').off('click', disabler);
} else {
$(this).removeClass('active');
$('.polygon_mark').on('click', disabler);
}
});
$('.polygon_mark').click(function () {
if(!$(this).hasClass('active')) {
$(this).addClass('active');
$('.square_mark').off('click', disabler);
} else {
$(this).removeClass('active');
$('.square_mark').on('click', disabler);
}
});
});
Function:
disabler: function(event) {
event.preventDefault();
return false;
},
The functionality to change classes are working fine, but what I wanted to add into this, os when anchor #1 is being pressed, this disables the other anchor, and when I press it once again, I'd like it to reenable the anchor, and also the other way around but for anchor #2.
I tried doing something like this, but I cannot get it to work, not fully understanding it either.
Do this and add a disable class to your css.
$('.square_mark').click(function () {
$(this).toggleClass('active');
$('.polygon_mark').toggleClass("disabled");
});
$('.polygon_mark').click(function () {
$(this).toggleClass('active');
$('.square_mark').toggleClass("disabled");
});
this should do the tric.
.disabled {
pointer-events: none;
cursor: default;
}
Edit: example on jsfiddle: http://jsfiddle.net/uKCYN/
And if you need to check for the active class to do something else you can code it like this:
$('.square_mark').click(function () {
if(!$(this).hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
$('.polygon_mark').toggleClass("disabled");
});
$('.polygon_mark').click(function () {
if(!$(this).hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
$('.square_mark').toggleClass("disabled");
});
and add your additional stuff into the if clauses.
Just modify the handler function like this and try again:
// handler function
function disabler(event) {
event.preventDefault();
console.log('item anchor clicked');
}

Categories

Resources