Here's the html for my button, according to Chrome:
<input checked="" type="radio" class="edit bindable" id="communicationAddresses[0].defaultAddress" name="EMAIL.default">
When I run this in my javascript console, the output output is "false"
$("input[type=radio]:first").attr("checked")
The actual UI element is visibly not selected. When I run this code, the button becomes visibly selected:
$("input[type=radio]:first").attr("checked", true)
Looking back at the html in Chrome, I see almost exactly the same thing I saw before. The only difference is that "checked" is now at the end of the tag instead of the beginning?
<input type="radio" class="edit bindable" id="communicationAddresses[0].defaultAddress" name="EMAIL.default" checked="">
A bit more information: there is another radio group lower down on the page. When I remove this second radio group, the first acts as expected. They are distinct groups. It is possible to manually select buttons from each one.
What's going on here? Why wasn't the button visibly selected to begin with?
##### EDIT
The button was selected to begin with, but wound up getting deselected due to a bug in some event binding code I was running.
The checked attribute corresponds to the checkbox's default checkedness, not its current checkedness.
In other words, the checked attribute corresponds to the defaultChecked javascript property, and not the checked property.
jQuery's $("foo").attr("checked", true) sets the checked javascript property, but doesn't affect the checked attribute.
Related
I'm trying to be WCAG friendly and have created a group of radio buttons, which, when they receive on-change, trigger action. But when I tried to navigate it by shift+arrow, I discovered that it doesn't just focus them, but right away checks them on? Am I missing something here, or is that normal behavior?
Edit:
The code looks like this for example:
<input type="radio" name="month" value="jan">January</input>
<input type="radio" name="month" value="feb">February</input>
<input type="radio" name="month" value="mar">March</input>
You didn't post any code so I'll assume you're using
<input type="radio">
and that you have several of them all with the same name attribute and that each radio button has a properly associated label with them. (Lots of assumptions but we can only guess if you don't post any code.)
When no radio buttons are initially selected, different browsers treat navigation to them differently.
On Firefox, I can tab to each radio button in the group.
On Chrome, I can only tab to one radio button in the group.
The tab does not select the radio button. It only moves the focus there.
Once my focus is on a radio button, then the arrow keys perform two behaviors:
It moves the focus to the next (or previous) radio button in the group and
It selects the radio button.
It sounds like you're asking about #2 behaivor. If so, then what you are seeing is normal behavior.
I have 2 radio button, (input type radio),i used "checked" on the second, now, if i want to check the first radio button i need to click twice, how di i fix it ??
<label>YES</label> <input type={'radio'} name={'license'}/><br />
<label>NO</label> <input type={'radio'} name={'license'} checked={'checked'}/>
You are using uncontrolled inputs, so the React rendering cycle is interfering with the user modified state of the DOM.
If you continue using uncontrolled inputs, use defaultChecked and not checked. (See default values.)
Controlled components are recommended in most cases though.
I have the radio group:
<input type="radio" name="menubar" id="menubar_1" checked="{{a::change}}" > A <br>
<input type="radio" name="menubar" id="menubar_2" checked="{{b::change}}" > B <br>
Full example on Plunker
I need to track the checked propery, but after I check-up the input, the variable will always be TRUE. Maybe it a bug?
Also I can't get work 'if' template.
And one more question: how to set default checked property?
The problem is that change event only fires when you check a radio button, not when you uncheck it. So always you check it, it goes to true, and when you uncheck it, it dosn't trigger change event as you can see in this answer
For the same reason, the dom-if never disappears.
That doesn't happen with checkbox as you can check in this plnkr, where binding and dom-if is working with the result of checkbox.
I have form with checkbox used in both add/edit mode but have scenario when in edit mode disable the checkbox with its value like checked or unchecked.
I have tried as below but not succeeded,
<input type="checkbox" disabled="disabled" checked="checked">
If an element is disabled, it's value is not posted along with the form, so while the checkbox appears checked, that information is not in the form data.
You may want to store the value in a hidden element, or (better, I think), let the server side script determine the proper default value if it is omitted.
I'm using some radio buttons to influence the behavior states of a jQuery widget.
That widget can be used in a form but, since these radios don't contain any actual data, I don't want them to submit noise to the server, or cause naming conflict to whoever will use the widget in his form.
Here are two potential solution starts, not yet satisfying though :
remove the name attribute : seems to work fine for other inputs, but turns my radios into checkboxes : it kills the link between them so selecting one doesn't unselect the others. Is there an HTML way (i.e. other than Javascript event) to bind them without a name attribute ?
disable the input : As expected, nothing is submitted, but the radios become grey and can't be clicked. Is there any way that they stay clickable yet unsubmittable, like disabled at submit time ?
As far as possible, I'm rather looking for a cross-browser solution.
Try call a function before submit, that disables the radio buttons.
function disableBtn() {
document.getElementById('idbtn1').setAttribute('disabled', 'disabled');
document.getElementById('idbtn2').setAttribute('disabled', 'disabled');
return true;
}
Then, in form:
<form action="file" method="post" onsubmit="return disableBtn()">
Try this:
<form>
<input type="radio" name="group1" value="1" form="">
<input type="radio" name="group1" value="2" form="">
</form>
This still uses the name attribute which is required for radio buttons, and it also leaves the inputs enabled for interaction. No JavaScript code, no during-submit patching of the document in hope that the submit will turn out fine and destroying the document before submit will leave no visible traces.
The form="" attribute indicates that these input elements are not included in their parent form. Actually you're supposed to put the ID of another existing <form> element in this attribute, but then again, by the HTML standard, you're probably not supposed to exclude radio buttons from a form. So this hack is the only solution to the problem. (Doesn't work in Internet Explorer, but what does today.)
I'm intending to use this method for radio button groups that are in a data table which is populated from a <template> element. In this case, there will be a radio group in each table row, so their number is unknown. But since the name attribute is the only way to build radio button groups, they'll need to get counting names assigned. Since the table data is put in a JSON field before submitting anyway, I don't need field names for a form submit. Radio buttons do need names for themselves, but this method will still exclude them from being submitted.