I have one checkbox use jQuery UI
<input type="checkbox" id="checkbox_1" name="checkbox_1" value="1" />
<label for="checkbox_1" class="checked">checkbox_1</label>
<script>
$(function){
$("input:checkbox").button();
};
</script>
And I query the data from database,the checkbox should be checked.
But it doesn't works when I added the attribute of "checked" in checkbox like normal usage.
How to achieve it?
add in html
<input type="checkbox"checked="checked"id="checkbox_1" name="checkbox_1" value="1" />
Related
I have a ViewBag like this
ViewBag.ApplyDiscount = false;
ViewBag.ExpressShip = true;
ViewBag.Supplier = null;
and some cshtml snippets like this
Discount:<input type="checkbox" checked="#ViewBag.ApplyDiscount"/>
Express:<input type="checkbox" checked="#ViewBag.ExpressShip"/>
Supplier:<input type="checkbox" checked="#ViewBag.Supplier"/>
after razor rendered the cshtml snippets,the real html will be
Discount:<input type="checkbox"/>
Express:<input type="checkbox" checked="checked"/>
Supplier:<input type="checkbox"/>
but if I add a space between the checked attribute and =like
Discount:<input type="checkbox" checked ="#ViewBag.ApplyDiscount"/>
Express:<input type="checkbox" checked ="#ViewBag.ExpressShip"/>
Supplier:<input type="checkbox" checked ="#ViewBag.Supplier"/>
razor will render the cshtml snippet in a wrong way. The html will be like this:
Discount:<input type="checkbox" checked ="False"/>
Express:<input type="checkbox" checked ="True"/>
Supplier:<input type="checkbox" checked =""/>
This will happen no matter MVC4(VS2012) or MVC5(VS2015).
So, can anyone tell me why a space will cause this thing to happen?
Because checked itself is a special stand-alone boolean attribute from legacy HTML and can be valid syntax without an attribute value.
It's presence alone indicates that the box is checked.
e.g.
<input type="checkbox" checked />
and
<input type="checkbox" checked="true" />
Perform the same way. It's why in jquery we always use the :checked selector. It obfuscates the need to check the variation.
i want to stop popup remember me box in asp mvc (programmatically) i tried autocomplete=off place password text-box and set it hidden but no solution is working.
Tried
autocomplete="off"
Tried
<input type="password" autocomplete="off" />
Tried
<form id="loginForm" action="login.cgi" method="post" autocomplete="off">
Tried
<input style="display:none">
<input type="password" style="display:none">
None of this working please guide me
I use jquery mobile for build a Phonegap application. I create any radio sets like this :
I want to checked a radio in a switch case!
switch (font_family){ case 'tahoma': $('#radio-1').checked(); ... }
Can you help me?
From the picture I am assuming you are using jQM version 1.3.x, however this solution works with 1.4.x too.
Assuming you have markup similar to this:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font:</legend>
<input type="radio" name="thefont" id="radio-1" value="arial" checked="checked" />
<label for="radio-1">Arial</label>
<input type="radio" name="thefont" id="radio-2" value="verdana" />
<label for="radio-2">Verdana</label>
<input type="radio" name="thefont" id="radio-3" value="tahoma" />
<label for="radio-3">Tahoma</label>
</fieldset>
The script to switch to Tahoma would be:
$("[name='thefont']").prop( "checked", false ).checkboxradio( "refresh" );
$("#radio-3").prop( "checked", true ).checkboxradio( "refresh" );
The first line unchecks all boxes and the second checks the tahoma box. In jQM you must refresh the checkboxradio widget after changing values.
DEMO
I have the following mvc code:
#Html.DropDownListFor(model => model.State, Model.States, new { #class = "form-control",
// Displays if the country is United States
style="display:{{State_Display()}}",
Name="State"})
#Html.TextBoxFor(model => model.State, new { #class = "form-control",
// Displays if the country is not United States
style="display:{{Province_Display()}}",
Name="Province"})
EDIT: I guess I should mention that Province_Display() is a method in my angular controller that either returns the string "none" or "block" depending on the country chosen.
In the latest versions of Chrome and Firefox, this does what you'd expect: if the user picks united states from a different control, the State field is shown and the Province field hidden.
In IE 10 however, both controls display all the time. Inspecting the elements with f12 in IE, neither of them have any style property at all.
The way I'm thinking of solving this would be to use angular to apply an additional CSS class to the elements instead of using angular to dynamically update the inline style, but my question remains:
Why does this work in Chrome and Firefox but not IE? What's being handled differently? Why doesn't anything appear for Style when I inspect in IE? If you know, will my CSS class idea actually fix the issue (before I bother reworking things)? I'd like to understand the cause so I can avoid similar situations in the future. Thanks!
Additional info:
Right-click, view page source (same in both chrome/IE):
<select Name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" name="State" style="display:{{State_Display()}}">
<input Name="Province" class="form-control" id="State" name="State" style="display:{{Province_Display()}}" type="text" value="" />
Inspect (Chrome):
<select name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" style="display:block">...omitted...</select>
<input name="Province" class="form-control" id="State" style="display:none" type="text" value="">
Inspect (IE):
<select name="State" class="form-control" id="State" data-val-required="The State field is required." data-val="true">
<input name="Province" class="form-control" id="State" type="text" value=""/>
There's still really not enough of your code to go by, but there are a few approaches you can take. The class thing you recommend should work, but there's something in your code we can't see that's causing it to not execute in IE properly. (any errors in your console?) My best guess... you're missing your DTD, or it's set improperly. Try adding this at the top of your html template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
A better approach (still need to ensure your DTD is set correctly) would be to use ng-show/ng-hide: http://docs.angularjs.org/api/ng.directive:ngHide
<!-- when $scope.myValue is truthy (element is hidden) -->
<div ng-hide="myValue"></div>
<!-- when $scope.myValue is falsy (element is visible) -->
<div ng-hide="myValue" class="ng-hide"></div>
However, if you wish, you can define a css class like so:
.hide {
display:none;
}
and just apply that class to whichever input you wish to hide within you application logic.
I've searched around the net but I have not found a solution.
Is there something like numeric up down, for numeric selection in Grails?
How can I create it?
You can achieve your requirement via simple html as:
<input type="number" name="quantity">
you can set range also as:
<input type="number" name="quantity" min="1" max="5">
and If you want you can add value attribute to be shown as:
<input type="number" name="quantity" min="1" max="5" value="${domainInstace.attribute}">
and Enjoy.......
Within a gsp ?
<g:select id="orderby" name="orderby" from="${1..10}" noSelection="['':'-Define Display Order 1 top 10 bottom-']" required="" value="${youdomainClassInstance?.orderby}" class="many-to-one"/>