I am trying to manually set a radio button to checked, but there is a problem. The code works just fine:
$('#'+align+'Text').attr("checked","checked");
But when I put jQuery UI into practice and make the radios a buttonset, everything breaks. Again, everything works fine until I put in the .buttonset(), then they look much better than normal radios, but the setting above does not work at all.
EMPHASIS ON THE FOLLOWING:
Has anyone been able to manually set a radio button while .buttonset() is active on those radios?
All you need to do is call the "refresh" operation on the button widget after setting the "checked" attribute.
$('#'+align+'Text').attr("checked","checked").button('refresh');
Here's the jsfiddle.
Note that setting the "checked" property can (and, some would say, should) be set with the .prop() function:
$('#' + align + 'Text').prop('checked', true).button('refresh');
Related
Behold the following jsfiddle: http://jsfiddle.net/RA3GS/4/
If you check on the checkboxes manually, you see that they say they are checked when they are checked and remain checked. However, if you push the test buttons you'll see that they either say they are checked, and then become unchecked, or say that they are not checked, and say they are checked.
Here is the problem: if I choose not to set the checked value before hand, the checkbox is correctly checked at the end, but the clicked function incorrectly states that it is unchecked. If I do set the checked value, then the click() function correctly states that the checkbox is checked, but then some other event (un)helpfully unchecks the checkbox at the very end.
The jsfiddle is a test; in my real implementation I will have no control over the click() function on the input element, so it is not merely a matter of changing the login in the click function.
This is the behavior I want, exactly:
You click on the button.
Any click() function is triggered and believes the element to be checked.
All other events believe the checkbox to be checked.
When everything is said and done, the checkbox is still checked.
Simpler example
I've put a simpler jsfiddle here:
http://jsfiddle.net/49jUL/
Without changing the status function, I want the console to display identically no matter which checkbox you check. Current output is:
clicking on manual
A tester received the following event change
Value: 100 Checked: true
A tester received the following event click
Value: 100 Checked: true
clicking on controller
A tester received the following event click
Value: 100 Checked: true
A tester received the following event change
Value: 100 Checked: false
I find it interesting that if I click on the manual radio button, change is called first and then click, whereas if I trigger click, click is called and then change.
Note that when I've tried calling it as $target.change().click() then it simply calls change, then click, then finally change again with checked set to false.
From my comment--
The checked field is a property, rather than an attribute, so I would recommend using the appropriate accessor and mutator for the "checked" status:
$('#checkBoxElId').prop("checked");
and
$('#checkBoxElId').prop("checked", true/false);
Alternatively you can use the is() function with the :checked pseudo selector to see if it's checked:
$('#checkBoxElId').is(':checked');
The "checked" attribute does not change after the initial loading of the checkbox. See the jQuery documentation on prop() for more information about the state of checkboxes.
EDIT: Solution
After finding a bug report explaining this behavior, I did a little experimentation with the workaround documented in the bug's comments: the use of triggerHandler("click") instead of calling click().
click() is just a shortcut for trigger("click"), which will trigger a matching event on all elements found by the selector, and will also invoke the native handler. triggerHandler("click"), OTOH, will only trigger the event for the first element found by the selector, and will prevent the default (native) behavior from occurring. It's the native behavior that is messing with the "checked" state of the checkboxes. By avoiding it, you get the desired behavior.
Here's an updated jsFiddle with my solution.
You can not be simply triggering the click on the check box, you need to verify the current status, and then act accordingly:
$('#pushbutton').on("click", function() {
var $obj = $('#myCheckBoxID');
$obj.prop('checked', !$obj.prop('checked'));
alert('now check is: ' + $obj.prop('checked'));
});
See this Fiddle Example!
EDITED
Followed improvement given by ThiefMaster on the first comment.
This drives me mad. I just can't understand it.
I wrote a filter-function based on checkboxes and clicking on their labels. I'm checking the 'checked' state of checkboxes and show mathed elements of the list (the rest elements are hidden). I use 3rdparty plugin that stylizes checkboxes (cut from example) and makes checkboxes checked while other onClick event does the filtering.
The problem is that after 'checked' state is successfully set inside a callback-function it "suddenly" becomes reset! I can't understand why that happens.
I implemented the base logic (without stylizing) here: http://jsfiddle.net/3Xtuh/13/
and ask all to help me solve this, please.
The problem is that you are invoking the click event manually, and then when your function is done running, the default click event is invoked.
By passing the event variable to your click handler and calling event.preventDefault(); fixes this behavior.
See example here: http://jsfiddle.net/3Xtuh/14/
The HTML label will check the associated checkbox even if it´s hidden (using CSS) so there´s no need to reinvent the wheel.
You should use the change() event. Try this demo and view your console.
It's default browser behavior that's messing your js script. By default, clicking on a label that is either wrapped around checkbox or have valid for attribute set, is toggling checked state of that checkbox.
You've attached custom onclick handler on labels.
So what's going on is that when clicking on a label? Your click handler gets fired (in in you alter state of target checkbox), and then
I have statement $("#myDiv").attr("disabled","disabled");
I thought that once I disable "parent" container, all elements inside of this become disabled. What I see actually, that text-box looks like disabled and "delete" not works within, but I can type there. check-box that inside of the same div, really looks disabled and I can't check/uncheck it. I'm not sure for 100%, but I think that I already used disabling that way and it worked as I expected (text-box not typeble). So I want to know if I need explicitly set disabled for textboxes or maybe some other CSS breaks what I'm expecting.
UPDATE:
I know how to set disable explicitly for elements that i need, I just not want tot do it and what I'm asking that if it the only way to disable it, or textbox may work exactly as checkbox (without explicitly disabling it) and just some CSS breaks this behavior.
As far as im aware doing that is not cross browser friendly nor valid markup. Best option would be to do something like
$('#myDiv').find('input,textarea,select').attr("disabled", true);
That should find all form elements within the div and apply teh disabled flag directly
Edit: or even just
$('input,textarea,select', '#myDiv').attr("disabled", true);
You can use the :input selector:
$("#myDiv :input").attr("disabled", true);
I'm trying to customize radio buttons with jquery.
I know there are tons of solutions working out there, but I need to set a different image for each radio button. This is needed because there is no label description, so each radio button must be styled to understand its meaning (example: two radio buttons, one with an image containing "$" and one "€" to check the preferred currency).
I'm creating a simple function called "Stylize" (actually I've tried it only on firefox, but I'll make it work up to IE6/7 and previous versions of major browsers).
By the way the function doesn't seem to work as expected, because it sets the checked attribute on all radio buttons, giving a weird result.
Here is the fiddle containing a simple example. I've analyzed the attributes with firebug. Actually it doesn't accept a different class name for each radio button, but this is the next step. As you can see the solution I'm working on is to wrap the radio button with an anchor tag and then bind a onclick event handler to select its radio button.
What can I do to make it work properly?
Thank you, Alex.
Here's a working example: http://jsfiddle.net/bFYW6/2/
Your problem was quite simple: You called var wrapper = $(radio).parent(); before actually wrapping the radio element. Therefore, .parent() referred to the <form> element, not the <a> that you went on to wrap the radio element in.
All I did was switch the order of those two lines and voila!
Another change you could make would be to the final line that actually binds the click event on the wrapper. Rather than:
$(wrapper).click(function() {
$(radio).attr("checked", true);
});
You could do:
$(wrapper).click(function() {
$(this).children().attr("checked", true);
});
By using $(this) in the above example, it will always find the radio element that is it's child. That allows you to then call the Stylize() function just once: Stylize("#radio1, #radio2"); or Stylize("input[type=radio]");.
Example: http://jsfiddle.net/bFYW6/6/
As a final point, you shouldn't use a capital 'S' for your Stylize() function. Beginning a function with a capital letter in JavaScript generally suggests that it is a constructor function for a class, which yours is not.
I had a requirement where I need to clear off the "select all" checkbox in case user manually deselects any of the data rows.
This has been accomplished by detecting this during an onRowSelect (jqgrid event) event.
The code snippet is as below and works as expected.
onSelectRow: function(){$("input:checkbox[id='cb_jqg']").removeAttr('checked');}
The thing I wonder about is whether I should check the checkbox for already selected before I clear it off or can I simply clear it (as it does not have any impact) as done above.
Is there any performance / code ethic issues with the syntax I used?
Adding a check before setting the value will be slower than just arbitrarily setting them all simply because it has to do the check.
Ethically, it's not gonna throw an error, so all's fair in love and coding, right?
This looks like you have multiple checkboxes with the same id. This is invalid in HTML. You could instead use the same name for these checkboxes.
Also, the more standard way of setting the checkedness of a checkbox is simply setting the checked property of the checkbox element to true or false, rather than rely on jQuery's attribute handling methods.