We Keep Coding

Cannot programmatically select radio button if preventDefault() called

I've got a 'catch 22' in Chrome. I cannot programmatically select a radio button within a click event if any other function bound to the same event makes a call to preventDefault().
For example, I have a radio button with a parent element bound to a click event in which preventDefault() is called. If the radio button is clicked directly it is not checked. This is to be expected. However, I actually need the radio button to be selected so within code I attempt to check it in another function bound to the click event: $(this).prop('checked', true);.
Oddly, this doesn't work and I cannot remove the call to preventDefault() or disable propagation because it is in third party code that I need to run.
Is this a bug? Any suggested workarounds?
Here is an example:
http://jsfiddle.net/LnLuk4st/
UPDATE:
I have tried #RGraham's suggestion. His example clearly works, but oddly it does not work in the context of my code. #RGraham's code had a syntax error which made it appear to be working.
Here's some context:
// Remember kendo tab
$(".k-tabstrip").each(function () {
var $tabStrip = $(this);
var $tabs = $tabStrip.find(".k-tabstrip-items .k-item");
var tabCookie = "Current_Tab_" + $tabStrip.attr("id");
// On tab change, set cookie
$tabs.click(function () {
createCookie(tabCookie, $(this).attr("aria-controls"), 1);
$tabStrip.parent().css({ 'min-height': $tabStrip.parent().height() });
if ($(this).is('input')) { // Doesn't eval to true, 'this' is always a '.k-item'.
$(this).prop("checked", true);
} else {
// Never works if the input is clicked directly
$(this).find('input').prop("checked", true);
}
});
// #RGraham's suggestion...
$tabs.on('click', 'input', function() {
$(this).prop("checked", true); // Line reached but doesn't work either :(
});
// If cookie set, select tab
var tab = readCookie(tabCookie);
if (tab) {
$tabs.each(function () {
if ($(this).attr("aria-controls") == tab) {
$(this).click();
}
});
}
});

I still believe this behaviour to be a bug but I have found a workaround.
Capture the click of the radio button directly, prevent propagation, then programmatically click the parent of the radio button. This allows the third party code to run without applying preventDefault to the radio button.
// preventDefault bug fix.
$tabs.find("input").click(function (e) {
e.stopPropagation();
$(this).parent().click();
});

Show hide custom metaboxes, live, with jQuery

I am trying to toggle the visibility of some custom meta boxes via jQuery.
I managed to hide them by default and to make them visible when clicking on the correct post format.
I am not finding a solution for making the meta boxes disappear when the user changes the post format.
e.g.
Default: Hidden
Click on "Aside": Show
Switching from "Aside" to any other post format: hide.
I have the following code:
jQuery(document).ready(function () {
jQuery("#postbox-container-2").addClass("hidden");
if (jQuery("input#post-format-video").is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
jQuery("input#post-format-video").change(function () {
if (jQuery(this).is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
});
});
Any idea?
Different approach based on #zipp fiddle
Query(document).ready(function() {
jQuery( "#postbox-container-2" ).hide();
var toToggle='';
jQuery('input#post-format-video').change(function() {
if (toToggle){
jQuery(toToggle).hide();
}
//alert(this.value+ " is checked");
var selector='#postbox-container-2';
jQuery(selector).toggle();
toToggle=selector;
});
});
even this one works fine but does not change live when I click on a different radio button

Here is a jsfiddle with your example. The change event is triggered only on the checked input. It won't be triggered when it is unchecked for a specific input. In order to know if your specific input is unchecked you need to test if the selected input is yours: $(this).attr('id') == 'post-format-video' and do your action. In my example I am selecting the radio input with $('input:radio[name=myRadio]') therefore you need to adapt your html and code to have the correct selector.
//This selector is triggered when my radio is selected for all input radio that I want to listen to
$('input:radio[name=myRadio]').change(function() {
//if we have a radio button selected previously we hide the div related
if (toToggle){
$(toToggle).hide();
}
//select the div we want to show
var selector;
if ($(this).attr('id')=='post-format-video'){
selector='#postbox-container-2';
}
...
//show it (could have called toggle() )
$(selector).show();
//store it for the next selection
toToggle=selector;

Disabling and Enabling Foundation Dropdowns

I am working on a page that would allow users to enter an edit mode, in which dropdown forms appear when clicking on links, but I would like to disable this when users are not in editing mode. What I need to happen is for the data-dropdown attr to start as "disabled" but then be set to whatever id that corresponds with the form it should open, "drop25" for example. I have tried using both the attr and prop methods but haven't gotten very far. I can get them to start as disabled, but if I try to edit the attribute in a click handler it doesn't seem to work, even when the source says they change.
Here is what I have so far:
$(document).ready(function () {
$('a').attr('data-dropdown', 'disabled');
$(document).on("click", ":button.edit", function() {
//Enter Edit mode
if (editMode == false) {
editMode = true;
//when editing, enable dropdown
$('a').attr('data-dropdown', 'drop1');
}
else {
//turn off editing mode
editMode = false;
//disable dropdown
$('a').attr('data-dropdown', 'disabled');
}
});
});
Does anyone know if what I'm trying to accomplish is possible? Should I instead maybe just use another type of dropdowns?

Here is what I did to solve my problem
$(document).on('click', 'a', function () {
if (editMode == false && $('.f-dropdown').hasClass('open')) {
$(this).trigger('click');
window.location = $(this).attr('href');
};
As you can see, I added a click handler to all links, if the user isn't in edit mode and the foundation dropdown is open (which happens when you click on a link connected to a dropdown), trigger a click function on the link to close the dropdown and then visit the link that was clicked on.

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.

Detecting form changes using jQuery when the form changes themselves were triggered by JS

I have a list of radio buttons that I can toggle "yes" or "no" to using Javascript.
$(document).ready(function(){
$('#select-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', true);
$('input[type="radio"]', this).eq(1).attr('checked', false);
});
});
$('#deselect-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', false);
$('input[type="radio"]', this).eq(1).attr('checked', true);
});
});
});
this works just fine. Now I have a separate piece of code that detects when a user has changed something, and asks them if they want to leave the page.
var stay_on_page;
window.onbeforeunload = confirm_exit;
$('.container form input[TYPE="SUBMIT"]').click(function(){
stay_on_page = false;
});
$('#wrapper #content .container.edit-user form').change(function(){
stay_on_page = true;
});
function confirm_exit()
{
if(stay_on_page){ return "Are you sure you want to navigate away without saving changes?"; }
}
The problem is that if the user uses the first piece of functionality to toggle all radio buttons one way or another. The JS detecting form changes doesn't see that the form was changed. I have tried using .live, but to no avail. Anyone have any ideas?

I do something similar to this by adding change() (or whatever's appropriate, click() in your case I suppose) event handlers which set either a visible or hidden field value, then check that value as part of your onbeforeunload function.
So, my on before unload looks like:
window.onbeforeunload = function () {
if ($('#dirtymark').length) {
return "You have unsaved changes.";
}
};
And, or course, dirtymark is added to the page (a red asterisk near the Save button), when the page becomes dirty.