We Keep Coding

In jQuery is there any method similar to on('click' for checkbox enabled event?

I have accending and descending sort icons for sorting purposes. On the initial loading, sorting is in an enabled condition
I am in need of a solution similar to below:
$('.pgggo-container-ajax-sorting').on('click', '.pgggocheckboxdecendinp', function(event) {
say when the descend icon is clicked this function should run. But the above method is not working for a checkbox. Please help

You can try this:
$('.pgggo-container-ajax-sorting').on('click', '.pgggocheckboxdecendinp', function(event) {
if($(this).is(':checked')) {
// code for checked condition
}
else {
// code for unchecked condition
}
});
This will work with checkbox.

Why isn't my Javascript working?

I am new to coding and I need to use Javascript in my code. I have a checkbox within an HTML table (below).
<td><input type="checkbox" id="check1"/>
<label th:text="${item.contents}"> </label>
</td>
I am trying to use Javascript to alert me when I have checked the box with the code below.
<script>
$('#check1').click(function() {
if($(this).not(':checked'))
alert('unchecked');
else
alert('checked');
});
</script>
Why isn't it working? I don't get an error, but nothing happens either.
Thank you.

Ok, first, you have some syntax that is not HTML here:
<label **th:text="${item.contents}"**>
And, if that non-HTML code is incorrect, that could be enough for the page to stop processing. You say you don't get an error, but do you mean that you've checked your developer tools console window and don't see an error there?
As for the checkbox, neither the table cell, nor the label are related to your goal.
Next, JQuery is a great thing, but it sometimes makes things that are already easy, harder. Your code is actually EXCLUDING any checked elements from the wrapped set that will be examined because you are using not().
Here is a solution that doesn't rely on JQuery:
var chk = document.getElementById("check1");
chk.addEventListener("click", function(){
// The following is not part of your question, but is
// added just for completeness:
// Because the alert() is modal, it will block the UI
// from updating and it will most likely appear before
// the UI updates the checkbox to the latest appearance.
// To solve this, we add a short delay before making the
// alert using a timer and we need to store the checked
// status of the checkbox outside of the timer's callback
// function.
var on = this.checked;
setTimeout(function(){
var message = "checked";
if(!on){
message = "un" + message;
}
alert(message);
}, 50);
});
<input type="checkbox" id="check1">

I don't think it's normally very wise to listen to click events on things like checkboxes and radio buttons. From what I understand they may be triggered before the value of the input is updated, depending on where you catch the event in the dom.
I'm not sure what the html syntax is on your label, the th:text part, but it seems to be some sort of templating syntax and also may be unrelated. To help simplify the problem also I will give you an example without using jQuery, jQuery often adds unnecessary complexity to simple problems.
A properly working example of your code using vanilla javascript (without jquery) would be,
document.getElementById("check1").addEventListener('change', function(e) {
var checked = this.checked;
if(checked) { alert("Checked"); }
else { alert("Unchecked"); }
});
And with jquery, a working example is:
$("#check1").on("change", function(e) {
var checked = this.checked;
if(checked) { alert("Checked"); }
else { alert("Unchecked"); }
});

Jquery Fancyform and IE10: Checkbox does not get checked when clicking on label

So, I have this weird IE10-Bug (IE11 works correctly):
I've got a checkbox like this:
<div class="select-row row-b">
<p>some text</p>
<label><input type="checkbox" name="checkboxGroupA" data-index="1" value="A1"/>A1</label>
</div>
Using Fancyform-jQuery-Plugin v 1.4.2, it seems there's a bug in Fancyform for IE10:
so pretend this is my checkbox (somewhat styled): [ A1 ]
Clicking somewhere inside the borders ( inside [ ] ) works. Checkbox is checked. But clicking directly on the Text (the Label, "A1") does not work, checkbox state does not change from unchecked to checked.
I added a console.log("..."); to fancyforms transformCheckbox-method right here:
check: function () {
console.log("setting check");
method.setProp(this, "checked", 1);
},
just showing me the same. "check" is not triggered, when I click at the label.
It would be great to get some hints here, for I am out of Ideas now.
Best Regards,
Dom

I had the same problem, in this case you need to bind the event because the IE version.
$(".select-row row-b label").bind('click',function(){
$('input',this).attr("checked",true);
})
Edit: Here's my working code, based on this answer. I edit this code inside here because there are several side effects you have to take care of:
this.$rowLbls = $(this.$el.find('.row-alter label')); //might be $('yourdomelement', 'yoursecond...'')
this.$rowLbls.click(function(event) {
var ele = $(this).find('input');
if( $(event.target).is("label") ) { //check exactly for label, because fired twice if not => would work just once
if(ele.is(':checked')){
ele.prop('checked', false); //prop instead of attr for true/false
} else{
ele.prop('checked', true);
}
}
});

Prevent checkbox from unchecking when clicked (without disable or readonly)

I'm using a checkbox and I want people to be able to check/uncheck it.
However, when they uncheck it, I'm using a jQueryUI modal popup to confirm that they really want to do that. Thus they can click OK or Cancel, and I want my checkbox to be unchecked only if they click OK.
That's why I would like to catch the uncheck event to prevent the checkbox from being visually unchecked, and uncheck it myself programmatically if the user happens to click on OK.
How could I do that ?
PS: I know I could re-check it after if the user clicks on Cancel but that would trigger the check event which I do not want.

$("#checkboxID").on("click", function (e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
// do the confirmation thing here
e.preventDefault();
return false;
}
});

Pure CSS Solution
Select Checkbox like -
input[type="checkbox"] {
pointer-events: none;
}
Works Pretty well, and now you can toggle your checkbox on any element click of your choice.

Something like:
$("#test").on('change', function() {
this.checked=!this.checked?!confirm('Really uncheck this one ?'):true;
});
​
FIDDLE

$("#checkboxID").click(function(e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
//check it
} else {
// prevent from being unchecked
this.checked=!this.checked;
}
});

How about using the HTML disabled property?
<input type="checkbox" name="my_name" value="my_value" disabled> My value<br>
Link:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled

$("#yourCheckBoxId").on('change',function(e){
e.preventDefault();
$("#yourPopDiv").popup();
});
preventDefault() will disable default behavior of your input[type="checkbox"]
And on your popup div
$("#ok").on('click',function(){
$("#yourCheckBoxId").attr("checked",true);
});

My value
Light javascript. Better than disable if you still need the element submitted in a form.

jQuery - Checkbox not being checked

I'm using checkboxes to toggle the enabled and disabled state of some multi-lists on a registration form. The checkbox is labeled with the category, and the multi-list contains the items that belong to that category.
I'm using jQuery 1.7.2.
$('#sch_cat_hockeyschools').toggle(function(ev) {
ev.stopPropagation();
$("#type_select_hockeyschools").prop("disabled", false);
$("#type_select_hockeyschools").removeProp("disabled", "disabled");
$("#sch_cat_hockeyschools").prop("checked", true);
$("#sch_cat_hockeyschools").prop("checked", "checked");
}, function(ev) {
ev.stopPropagation();
$("#type_select_hockeyschools option:selected").removeAttr("selected");
$("#type_select_hockeyschools").prop("disabled", true);
$("#type_select_hockeyschools").prop("disabled", "disabled");
$("#sch_cat_hockeyschools").prop("checked", false);
$("#sch_cat_hockeyschools").removeProp("checked");
});
Sample of corresponding checkbox HTML:
<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_hockeyschools" value="1" />General Hockey Schools
<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_springhockey" value="2" />Spring Hockey
The problem is that the upon clicking the checkbox, the checkbox does not become ticked or checked; it immediately returns to an unchecked state, which I thought the stopPropagation() function would help with. Apparently not. The multi-lists get enabled and disabled as expected, but the checkbox doesn't get ticked.
The result of this problem is that when the form is submitted, the array containing the selected categories is empty; thus, because at least one checked category is a required field in the form, the PHP script that processes the form throws one of my errors which tells me a required field was left blank.
Any ideas on how to make sure that the checkbox actually gets checked, and by extension, POSTS actual data to the processing script?
Thanks guys.

The problem is the use of toggle -- per the documentation:
The implementation also calls .preventDefault() on the event, so links
will not be followed and buttons will not be clicked if .toggle() has
been called on the element.
toggle itself is calling preventDefault, which is stopping the default behavior of the event, checking/unchecking the box.
Rather than toggle, use bind or on (see edit note below) to add a listener for the change event, in which you can examine the state:
$('#sch_cat_hockeyschools').on('change', function () {
if (this.checked) {
// do stuff for a checked box
console.log('check is on');
} else {
// do stuff for an unchecked box
console.log('check is off');
}
});
Try it out at jsFiddle.
EDIT
Please note, this code shows use of the on method, whereas the jsFiddle example uses bind. As pointed out by Sam Sehnert, on is the preferred method for attaching events with > jQuery 1.7. If you are using an older version of jQuery, use bind as in the jsFiddle example.
Documentation
jQuery.toggle
jQuery.bind
jQuery.on