This is an easy question for those in know, however, with a Google Search and Stack search i found there was no direct or straight answer.
I have a simple CheckBoxFor
#Html.CheckBoxFor(x => x.Classify)
which is generating the following 2 page elements
<input data-val="true" data-val-required="The Classify field is required." id="Classify" name="Classify" onclick="OnClassifyClick(this)" type="checkbox" value="true" data-bind="checked:Classify">
<input name="Classify" type="hidden" value="false" data-bind="value:Classify">
Obviously the second element is used for binding <-- this assumption is incorrect
How can i use jquery to change both of these values, so the posted model will reflect the state
The following code only changes the visual state and not the bound state (if that's the correct terminology) <-- this assumption is incorrect
$("#Classify").attr('checked', true);
results in the following
<input data-val="true" data-val-required="The Classify field is required." id="Classify" name="Classify" onclick="OnClassifyClick(this)" type="checkbox" value="true" data-bind="checked:Classify" checked="checked">
<input name="Classify" type="hidden" value="false" data-bind="value:Classify">
As you can see the bound value hasn't changed
Update
The example should work, see the excepted answer
Obviously the second element is used for binding
This is not strictly correct. The reason the #Html.CheckBoxFor() method renders both a checkbox and a hidden input is that unchecked checkboxes not not post back a value. If the checkbox is not checked, then the hidden inputs 'false' value is posted back. If the checkbox is checked, then its 'true' value is posted back and hidden inputs value is ignored (the default model binder ignores subsequent values with the same name).
You can see the source code here.
Therefore you should not need to change the value of the hidden input, and doing so would probably result in posting back an incorrect value.
This code will change the checked status of checkbox to false if true.
if ($("#cbinPro").is(":checked")) {
$("#cbinPro").click();
}
Related
Context: I am new to Svelte and I am using the bind:group to assign true/false to a variable yes, but there is no default selection of any radio button. Using the checked="checked" in the radio input does not seem to work if there is a binding. It works fine when there is no binding.
REPL: https://svelte.dev/repl/28833b3a65d2417ea97c2594a5b3edbb?version=3.31.0 (I have used checked="checked" in the first radio input but it doesnt get checked)
Question: Is there a way to have both binding and the radio input checked by default, that is can there be a default binding and radio input selection?
Svelte will place in the value of the selected radiobutton in your variable. But you do not have a value defined on your inputs. This value will also be used to compare the currently selected value to the input's value and check/uncheck accordingly
<label>
<input name="yes" value={true} bind:group={yes} type="radio">
Yes! Send me regular email spam
</label>
<label>
<input name="yes" value={false} bind:group={yes} type="radio">
Yes! Send me regular email spam
</label>
(also don't forget to bind both inputs to the same variable)
I am trying to make an accessible form in React and I need to toggle the attribute aria-describedby based on the state of the field (i.e., if it has an error associated with it).
I know how to toggle the value of the attribute, but with regards to WCAG, a present but empty attribute of this type will fail. The entire attribute needs to be fully present or fully absent. Anything I try in-line throws errors and breaks the render.
To give an example, this is what I've been trying:
<label>
<input type="text" name="someName" ref="someRef" {!this.state.isValid ? aria-describedby="helperText" : ''} required />
<p id="helperText">Helper text for this form field.</p>
</label>
Again though, an empty attribute value for aria-describedby is invalid.
Is there any way to acheive this?
Just spread it like this:
<input type="text"
name="someName"
ref="someRef"
{... !this.state.isValid && {'aria-describedby': 'helperText'} }
required />
This is basically spread operator usage.
I'm using Angularjs for a website and I now want to use a checkbox. I first created a checkbox like this:
<input type="checkbox" checked>
I can of course remove and add checked to my liking to have it checked by default or not. I now add a model to it (the model is not defined in the controller yet):
<input type="checkbox" ng-model="settings.mySwitch" checked>
The checkbox still displays, but all of a sudden the checked has no effect at all anymore; the checkbox is always unchecked by default.
Why oh why does the model prevent the checked from having any effect? All tips are welcome!
That is because when as the element is rendered browser sets checked property but then angular processes ng-model on the check box (whose value is falsy) and it gets unchecked. Instead if you do ng-checked="true" it will work (because ng-checked directive sets the property after ng-model is processed as its priority is lower than ng-model). But your model's initial state will get messed up (if using 1.3.x+), as ng-checked will not update the state of ng-model. So just set the ng-model value to true instead.
Just for demonstration i am using ng-init (You should set the ng-model initial value in the controller instead).
<input type="checkbox" ng-init="settings.mySwitch=true" ng-model="settings.mySwitch" />
See Demo with comparison:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app>
<p> With ng-checked {{settings.mySwitch}}
<input type="checkbox" ng-checked="true" ng-model="settings.mySwitch" />
<p> WIth Proper Initialization {{settings.mySwitch1}}
<input type="checkbox" ng-init="settings.mySwitch1=true" ng-model="settings.mySwitch1" />
</div>
Instead use ng-checked like this :
<input type="checkbox" ng-model="settings.mySwitch" ng-checked="true">
Edit: #PSL is right you should be using ng-init instead as it will mess up your ng-model.
<input type="checkbox" ng-init="settings.mySwitch=true" ng-model="settings.mySwitch" />
It is because of the initial value of settings.mySwitch. If you want the checkbox to be checked by default then instead of adding checked property you should set the initial value to true because when angular processes the template it will get its value and render the checked property accordingly.
I have a checkbox and a few input elements related to this checkbox as shown below
<input name="balanceFeaturesOn" id="balanceFeaturesOn" type="checkbox" disabled="disabled" checked="" />Control
<input name="IntervalDays26566521" type="Text" onclick="" onchange="" value=" 31 ">
<input name="IntervalHours26566521" type="Text" onclick="" onchange="" value=" 12 ">
For some reasons, I will have to keep my checkbox always disabled.
On the submit of above form (Say that the checkbox and inputs are inside a form), in the server code, I want to grab the text inputs based on if the checkbox was checked/unchecked. However since the checkbox is disabled, the request parameter does not contain the balanceFeaturesOn property.
So when I execute the below line:
String[] balanceFeatArr = request.getParameterValues("balanceFeaturesOn");
I am not getting any value...
So my question is how do I be able to get the value of the checkbox while still keeping it disabled on the UI?
Try the following code,
In the form use javascript function to submit the form,
<input type='submit' onclick='javascript:submitMe()' />
Javascript function,
function submitMe(){
$('#balanceFeaturesOn').removeAttr('disabled');
$('#formId').submit(); //Replace with the actual id of the form
}
Make sure you have included jquery library in your code.
Use Hidden Fields.
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.
http://www.echoecho.com/htmlforms07.htm
I want to create a checkbox which is unchecked always by default and users should not check it. I don't want to make the checkbox disabled as i want to pass the value of the checkbox when i submit the form. Please suggest.
The below code is not working:
<input type="checkbox" id="chkbox1" name="chkbox1" value="unChecked" checked="false" readonly="readonly">
With the above code checkbox is always selected, i want the checkbox always be unselected and users should not able to select it.I should not use the disable option too as i want to send the value of checkbox when i submit the form.Thanks.
Just remove the checked attribute all together
<input type="checkbox" id="chkbox1" name="chkbox1" value="unChecked" readonly="readonly" />
Setting the checked attribute with any string value (even false) makes the checkbox checked
i want the checkbox always be unselected and users should not able to select it.I should not use the disable option too as i want to send the value of checkbox when i submit the form
It doesn't really sound like you want a checkbox at all, but just a hidden input that sends a value
<input type="hidden" name="chkbox1" value="unChecked" />
checked attribute sets the checkbox to checked status, no matter what value the attribute checked has.
checked="checked"
checked="true"
checked="false"
checked=""
all these set to checked status
so there is no way to unset the checkbox (except some js solution) manuelly except for completely dropping the checked attribute
UPDATE: Simply change disabled to readonly, so that user cannot check it, but you still can submit this field with form
I'm new so I can't leave a comment. But according to my understand to your problem, like#adeneo suggested, why not first use a hidden one that does pass a value for the "do" with the program; then put up a dummy disabled one for the "look" with the users? As you only need it for the moment? Then later you just hide the dummy one and show the real one?