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
Related
I came across an situation today where I wanted a checkbox to not change unless an associated ajax call was successful. By "not change" I mean - if the checkbox was currently checked then it should NOT show as unchecked until the ajax call was completed and was successful.
Example HTML:
<input type="checkbox" id="a" />
Example (psuedo) jQuery:
$("#a").change(function(e) {
//somehow stop the checkbox from showing as checked in the UI
$.ajax...
success: function() {
//checkbox should now show as checked in the UI
},
error: function() {
//show error to user. checkbox should still be unchecked.
}
});
Various google searches only turned up references to getting or changing the state of a checkbox.
For now I'm just changing the state of the checkbox back in the case of an error.
I suppose this could be done by using images to represent the checkbox and changing them at the appropriate times, but I'm looking for a solution that uses "native" HTML elements, CSS, and or Javascript (or some Javascript library). Just curious what stackoverflow users have to say about this.
Thanks!
Try to use instead of change(), click() function and prevent default action in it. Then on success you could manually change the checkbox state.
Here example
$("#a").click(function(e) {
$.ajax...
success: function() {
$('a').attr('checked','checked')
},
error: function() {
//show error to user. check box should still be unchecked.
}
e.preventDefault();
return false;
});
Is it possible to stop a checkbox from changing when clicked, pending
some check?
Yes, you can temporarily disable the checkbox while your ajax query is running.
It seems that you already using jquery, based on that, you can try:
$("#a").change(function(e) {
$("input#a").attr("disabled", true); //disable input
$.ajax...
success: function() {
$("input#a").removeAttr("disabled"); //re-enable input
},
error: function() {
//show error to user. check box should still be unchecked.
}
});
NOTE:
You should also enable the checkbox inside error: function(), but I followed your comment because I don't know what you're trying to accomplish.
The problem I am having is that the radio buttons in my scenario are not being selected when they are clicked. I have created a JSFiddle to show the code and the issue.
For whatever reason, I have an entire area that is surrounded in an element.
<a href="/link">
//some stuff
<div class="protected">
<input type="radio" name="b1" value="1" /> Button 1
<input type="radio" name="b1" value="2" /> Button 2
</div>
//some stuff
</a>
There is a small section within this tag that needs to be protected from the default behaviour of the link. This section contains some radio inputs which need to be selectable.
The way I currently have it, I am protecting the "protected" section with an event listener and:
$('.protected').off('click').on('click', function (e) {
e.preventDefault();
});
I also have an event listener on the radio buttons so that I can perform the change of property when they are clicked.
$('.protected > :radio').off('click').on('click', function (e) {
$(this).siblings(':radio').removeAttr('checked');
$(this).attr('checked', 'checked');
});
Unfortunately, this is setting the checked attribute in the dom however the radio button is not being filled in on the screen for the user.
Any help would be greatly appreciated.
You need to add stopPropagation()
$('.protected > :radio').off('click').on('click', function (e) {
e.stopPropagation();
//$(this).siblings(':radio').removeAttr('checked');
//$(this).attr('checked', 'checked');
});
Also, make sure to comment out
$(this).siblings(':radio').removeAttr('checked');
$(this).attr('checked', 'checked');
You don't need them as the browser handles this for you.
DEMO
What was happening is, since you had preventDefault in the container click handler, the nested click event was propagating to that click handler and was preventing the radio button from being set.
Lot of research and tries but didn't work.My Problem is I want to enable my button on check of at least one checkbox from the available list.
Following is the screen:
Initially this button is enabled but my requirement is it should be disabled initially and if at least one of the checkbox is checked then it should be enabled.
Here,I have one view as Create inside which one more partial view is there which displays all the list view with the help of one controller method i.e within my Create view one more view is being rendered which displays all the available list.
If it would have been in one view then I would have easily done this as lot of fiddles are there with jquery by getting the id of the checkbox and passing to one jquery function. I know that I need to check the count for the checkbox in order to make my button enable/disable but again we dont have any change event as that in ASP.
Also on click of add , method for controller is begin triggered as:
[HttpPost]
public ActionResult Create(int id, List<MyModel> myModelList)
{
// code...
}
Here once I click on Add button this controller method is triggered where in my parameters(myModelList) I am able to check which checkbox is checked.So, this thing I need to implement on checking any of the checkbox such that the add button will be enabled on click of which I will be able to add my teams.
So how to implement this or what I need to do for this?
Thanks in advance.
UPDATE: Oops. Added the :checked pseudo class
This is how you might do it in jQuery
$('#add_button_id').prop('disabled', true); // To disable initially
$(document).on('click', '.checkbox_class', function(){
if( $('.checkbox_class:checked').length > 0 ){
$('#add_button_id').prop('disabled', false);
}
else{
$('#add_button_id').prop('disabled', true);
}
});
You'll have to add the id for the button and classes for checkbox as you have in your html code
you can do it this way:
$(document).on('click', '.checkbox_class', function(){
if(".checkbox_class:checked").length > 0)
$('#add_button_id').prop('disabled', false);
else
$('#add_button_id').prop('disabled', true);
}).change();
you can also trigger change on page load:
$(function(){
$(".checkbox_class").tirgger('change');
})
$(".dist_radio").click(function(event) {
event.preventDefault();
$(".dist_radio").removeClass('dist_on');
$(".dist_radio").children('input').attr('checked', false);
$(this).addClass('dist_on');
$(this).children('input').attr("checked", true);
});
is the way I'm handling custom styled radio buttons and everything is fine if I click on a single radio (#1) and submit the form - it's being sent without errors (note that I'm having my form submit in a new window), if I chose another radio button (#2) and submit the form - again, the given radio is being sent with no issues, but if I then click back on the previously submitted radio button (#1), I get a validation error that I haven't chosen any radio button even though by checking the element with firebug, I can see that it has checked="checked" set.
Why is that and what can I do to fix it?
Use .prop() instead of .attr() for property values
$(".dist_radio").click(function(event) {
event.preventDefault();
$(".dist_radio").removeClass('dist_on');
$(".dist_radio").children('input').prop('checked', false);
$(this).addClass('dist_on');
$(this).children('input').prop("checked", true);
});
The transition from one slide to the next is handled by your submitHandler, so the radio buttons need to do is submit the form on click, with that in mind:
$('input[type=radio]').click(function() {
$(this).closest("form").submit();
});
Stumbled along with this issue and spent hours solving it. This is why:
.prop() vs .attr()
I have a very strange issue with jQuery where I am triggering a click on a radio button but it is not firing completely and is not being captured by an on click function, however a similar call to jQuery trigger is being captured.
In the following jQuery I am selecting a <div> and using find to search for the suitable content.
var prev_chosen_d_option = $('#d_options_table .d_option_row[data-option-id="' + d_option_for_jq + '"]');
// this works, and the on click is captured
prev_chosen_d_option.find('.hover_target').trigger("click", true);
// this selects the radio button, but DOES NOT fire the on click function seen below
prev_chosen_d_option.find('#d_standard_use_b_as_s_no').trigger("click", true);
These are my radio buttons:
<input type="radio" value="yes" id="d_standard_use_b_as_s_yes" name="d_standard_use_b_as_s">
<input type="radio" value="no" id="d_standard_use_b_as_s_no" name="d_standard_use_b_as_s">
$("#d_options_table .d_option_row .hover_target").on("click", function(e, isFirstLoad) {
// it comes in here fine!
});
$('input[name=d_standard_use_b_as_s], input[name=d_next_day_use_b_as_s], #del_standard_use_b_as_s_no').on("click", function(e, isFirstLoad) {
// it DOESN'T come in here
});
I can't see how jQuery is able to select the radio button and successfully check it, but the on method doesn't pick it up as a click...especially when I have a very similar setup running in close proximity in the code.
I know for sure that the radio buttons are within the selector as I can dump it out to the console with a console.log. Interestingly, when I dump out the events attached to it to the console I get undefined from this after the trigger:
console.log(prev_chosen_d_option.find("#_standard_use_b_as_s_no").data('events'));
(I am using jQuery 1.7.2 and testing in FF).
Instead of
$('input[name=del_standard_use_b_as_s], input[name=del_next_day_use_b_as_s], #del_standard_use_b_as_s_no').on('click', function(e) {
//
});
Try :
$(document).on('click', 'input[name=del_standard_use_b_as_s], input[name=del_next_day_use_b_as_s], #del_standard_use_b_as_s_no', function(e) {
//
});
The reason for this not working was simply I had the click handler below where I was actually triggering the click in the code.