I have the following HTML on my page:
<input id="chkIncludeCA3" type="checkbox" /><label for="chkIncludeCA3">Category 3:</label>
And on my code page, the following piece of script:
$('#chkIncludeCA3').prop('checked', true);
Can someone explain to me how I would also update the visual state of the label to show that the checkbox is indeed checked?
EDIT
Thanks to Christophe Roussy for the correct pointer, have discovered the following works perfect:
$('#chkIncludeCA3').prop('checked', true); $("label[for='chkIncludeCA3']").addClass('ui-state-active');
If anyone knows if there is a more official way, I'd appreciate it.
You mean something like this to get the label ?!
$("label[for='chkIncludeCA3']")
Related
This is more of a pointing in the right direction sort of thing. I'm currently working on a project where a handful of fields will be hidden until a radio button is checked, therefore also not required until then. So tick the specific radio button, fields show up and they are now required on submit with the [Required] DataAnnotations attribute in the model.
I went down the path of trying to use MVC Foolproof and [RequiredIf], but didn't have much luck considering the outdated js files necessary and was wondering if someone else had a simpler solution.
I appreciate any input. I feel like this isn't too uncommon of a task but had a lot of difficulty finding a solution via Google.
I am sure you can accomplish this with using Javascript/Jquery.
Like so:
if($('#idNameOfRadioBtn').is(':checked')){
$('#idOfFieldNameThatIsNowRequired').attr('required');
}
else{
$('#idOfFieldNameThatIsNowRequired').removeAttr('required');
}
Let me know if this helps!
I suggest that you use angularjs for this as it is built for it. If you are not familiar with angular validation, here is a great article in scotch where it gives a really good demonstration. Good luck!
Hide and show fields based on ng-if directive and make field required using the required attribute. That's it!
<input type="text"
name="name"
class="form-control"
ng-model="user.name"
ng-if="user.required"
required>
Angular Validation
Hello to all I read that this issue
https://github.com/angular-ui/bootstrap/issues/274
is was closed... I've this jsfiddle
https://jsfiddle.net/qq4gqn6t/12/
but when I change the model the label not change... Can help me?
Thanks
Checkout if this jsfiffle, if that is your desired behavior?...
All I've done is:
<input ng-model="selected.descrizione" class="form-control">
replaced state.descrizione with selected.descrizione
Thing is, that state is not available outside uib-typeahead directive, but at the same time selected becomes handle that we can use.
I'm trying to use the new flipswitch control of jquerymobile instead of the slider, but it has a strange behavior: "flipping" the switch doesn't make knockoutjs update values accordingly.
But calling .val() on the select element I get the right value as it should be from the visual state of the flipswitch.
I've made a demo on jsfiddle
http://jsfiddle.net/Dn3Fz/3/
<select data-bind="value: Partecipating" id="switch" data-role="flipswitch">
<option>Yes</option>
<option>No</option>
</select>
<br>Value is: <span data-bind="text: Partecipating"></span>
As you can see, the normal dropdown menu, and the slider update the label, while the flipswitch doesn't.
I cannot understand if this is a bug in the flipswitch widget or in the library. Or something else.
Would appreciate some help in debugging and possibly solving this problem.
Thank you
Simone
It was a bug of jquerymobile 1.4 beta
I want to dynamically add a textbox to a span or div or whatever.. I'm doing this:
$('#optionsArea').append('<input type="text" class="q1Options" name="q1Options" data-theme="b" value="" />');
This works however, the textboxes do not come in as a JQ Mobile style text box... I know that the refresh command is used on most form elements...but have tried it with .text and .textbox and couldnt get it to change.
Can someone tell me how to add these as JQMobile textboxes.
I found the answer -- sorry for posting prematurely (I can delete this if it is wished or it might be good to leave it up as its not immediately apparent) --unless you actually read the docs :)
Calling
$('input').textinput();
does the trick!
http://jquerymobile.com/demos/1.0/docs/forms/textinputs/index.html -- Bottom of this page is where I found it.
I have a problem in IE. Hitting enter when the focus is on the last input control sends the focus to the "Next" button. This submits the form. So far, so good.
The code in my base class WizardController looks to see if the Next submit button is null, as follows:
protected string NextButton
{
get
{
return ControllerContext.HttpContext.Request.Params["NextButton"];Nex
}
}
However, despite the form submitting, this property returns null unless the user explicitly clicks on the button with his mouse.
This is blatantly wrong, but I have no idea why it is happening.
EDITED TO SPECIFY THE PRECISE PROBLEM:
The problem only occurs IF there is ONLY one TEXT input control in the HTML form that gets rendered to the browser.
END EDIT
Andrew
I have finally found an explanation for my problem:
It seems to be a bug in IE, whereby if there is a single text input in the rendered HTML form, then IE will not submit the form properly. The issue is described (briefly) at:
Form Submit via Enter Key when using IE
In the above link, no description is given as to why the bug occurs, or since what version of IE, so a blanket solution is better.
The workaround suggested in the article is to add a css hidden text input (with conditionals for IE):
<!--[if IE]>
<input type="text" style="display: none;" disabled="disabled" size="1" />
<![endif]-->
This worked for me, so issue solved.
The following is included to document the issue as I experienced it:
Unlike the problem described in the article, my form did submit. However, when I tried to check which button had been accessed by hitting tab or enter key, no submit button was in the HttpContext.Request.Params collection. So the behaviour I saw was slightly different.
What the above article did identify is that this behaviour is only seen WHEN there is ONLY one text input control. A single check box, for example, does not cause the problem.
I hope that this documents the problem adequately... and that MS will one day correct the bug.
A simple work around might be to use a hidden form element and depend on that rather than the button.
<input type='hidden' name='action' value='next' />
If you have multiple buttons you can always use JavaScript to change the value of the action element just before submitting.