I have a boolean variable and if it is true I want to set some checkboxes to disabled
I was able to make my input text boxes readonly by using this inside my HTML for the text box:
readonly ="<%# myIsReadOnly %>"
But checkboxes don't have that. So wanted to make them disabled if that variable is true.
How do I do that? I am also on VB language.
The example of CheckBox I have is something like this:
<input type = checkbox" name="blah" id="blah"/>
You can manually stick in server-side code to render both attribute and value.
<input type="checkbox" <%= myIsReadOnly ? "disabled='disabled'" : "" %> />
Related
I'm using a template with custom CSS (.less) for checkboxes (making them appear as "Yes|No", "On|Off", etc.)
Using #Html.CheckboxFor(model => model.BooleanProperty, new { #class="custom-switch" }) results in a checkbox not appearing, at all.
So I got to digging around, found many questions on here with similar issues, but none of the solutions worked for me so far. The solution I'm currently working on is to use a custom EditorFor template. This is rendering the checkbox correctly, however, what I'm experiencing is that if the slider is switched to "NO", it's passing across to the controller as null instead of false, and if it's switched to "YES" it's passing across to the controller as "on".
I know that Html.CheckboxFor renders a checkbox element followed by a hidden input element. What purpose does this serve? Following are rendered HTML from the two methods as well any questions pertaining to that specific :
Straight HTML for Checkbox
::before ::after
When this is passed to the controller, why is the value of BoolProperty "true,false"?
#Html.CheckboxFor(model => model.BoolProperty, new { #class="custom-switch" })
<input checked="checked" data-val="true" data-val-required="The BoolProperty is required." id="BoolProperty" name="BoolProperty" type="checkbox" value="true" class="custom-switch">
<input name="BoolProperty" type="hidden" value="false">
What purpose does the hidden input field play? If I remember right, only the first "BoolProperty" named value would actually be passed to the controller anyways. I can't find anything that would suggest that one updates the other when the value changes, and through testing, I've noticed that the value does not change.
#Html.EditorFor(model => model.BoolProperty, new { #class = "custom-switch" })
<input type="checkbox" checked name="BoolProperty" class="custom-switch">
<label>::before ::after</label>
Why would this pass across the values of "on" or null to the controller? Why not true and false?
The Boolean Editor Template
#model Boolean?
var isChecked = ViewData["checked"] != null && ViewData["checked"].ToString() == "true";
<input type="checkbox" checked="#(isChecked ? "checked" : string.Empty)" name="#name" class="#ViewData["class"].ToString()" />
<label class="lbl"></label>
The hidden field is there to force the field to be included in the form POST even when nothing is checked. Without it, the field is omitted altogether, per the standard. You wouldn't know the difference between a "false" value or a non-existent field.
http://www.w3.org/TR/html401/interact/forms.html
As far as why it uses "on" vs "true", that is something you can control yourself. If you want true/false instead of on/off, use that. "on" is just a default, but not required.
<input type="checkbox" class="checkbox" name="BoolProperty" value="true" />
<input type="hidden" class="checkbox" name="BoolProperty" value="false" />
About the hidden field
I can't find anything that would suggest that one updates the other
when the value changes, and through testing, I've noticed that the
value does not change.
No, it doesn't change. The browsers, then a checkbox is not checked, don't submit anything using that name. So, the hidden propose is to submit the value "false" (with the same name) when the checkbox isn't checked.
When the checkbox is checked (as you said) the posted value is "true,false" (first the value of the checkbox and then the value of the hidden). The MVC binder deals with this string to convert it to true value setting it to the BooleanProperty.
About the on value
It is the default value for the checkbox. See here.
How can I check in asp.net if checkbox was chcked?
Here the CheckBox:
<input type="checkbox" id="FootBallManager2013CheckBox" />
Since your markup is not using a CheckBox server control, I'll assume you want to check the input manually.
You have to give the input a name, otherwise it can't be posted. Call it, for example, name="FootBallManager2013CheckBox".
In the code-behind, look in Request.Form["FootBallManager2013CheckBox"] and see if it is non-blank. If the form element is present, it was checked; if it's not, it wasn't.
Example:
var footBallManager2013CheckBoxChecked = !string.IsNullOrEmpty(Request.Form["FootBallManager2013CheckBox"]);
Or, you could just use the server control, which is easier.
<asp:CheckBox runat="server" id="FootBallManager2013CheckBox" />
Code-behind:
if (FootBallManager2013CheckBox.Checked)
{
}
change html as
<input type="checkbox" id="FootBallManager2013CheckBox" RunAt="Server"/>
then on server side in code behind
if(FootBallManager2013CheckBox.Checked)
{
}
if(FootBallManager2013CheckBox.Checked)
{
}
you can tell by the checked property on the checkbox:
input type="checkbox" id="FootBallManager2013CheckBox" checked="checked"
or code wise (vb)
IF FootBallManager2013CheckBox.checked = checked then
[write what you want to do]
End IF
It seems this ought to be dead simple, but I'm stuck. I've written some asp.net code that outputs a pair of radio buttons:
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='<%=gblYapperChecked %>' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' checked='<%=gblNonYapperChecked %>' />
if (registrationUser.isYapper == 1)
{
gblYapperChecked = "checked";
gblNonYapperChecked = "";
}
else
{
gblYapperChecked = "";
gblNonYapperChecked = "checked";
}
As expected, I get two radio buttons, "Yapper" and "Non-Yapper". However, even when I step thru my code and see that gblYapperChecked is "checked" and gblNonYapperChecked is "", Non-Yapper is always selected by default in the web browser.
What am I doing wrong?
UpdateHere is the HTML code as it actually appears in the browser. "Yapper" should be selected, but "Non-Yapper" appears selected instead.
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='checked' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='yapper' id='chkNonYapper' value='nonYapper' checked='' />
Note that the HTML "checked" attribute is generally determined by being present or not present. See http://www.w3.org/TR/html401/interact/forms.html#adef-checked for the spec.
In particular what this means is that if you want it to be checked you cna have checked, checked=true, checked=checked and so on. So what you want is to not have the checked attribute at all if you don't want the checkbox selected.
I would advise structure such as:
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' <%=registrationUser.isYapper?"":"checked='checked'" %> />
This should eliminate your checked attribute entirely dependant on your isYapper boolean.
The "checked" attribute is weird, it has no value. If a radio button is checked, include the "checked" attribute by itself in the tag. If unchecked, don't do anything. See here:
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_RADIO.html
Are you setting dblYapperChecked before or after the control is created? Personally, I'd run the radio buttons on the server side and set the checked value on the control directly, but your method should work if the values are set soon enough (try initializing them to the expected values and see if that makes a difference...)
I'm adding a check box to a page using the following statement;
<script language="C#" runat="server">
protected void Page_Load ( object src, EventArgs e )
{
if (!IsPostBack)
{
CheckBox XChkBox = new CheckBox(); //instance of System.Web.UI.WebControls.CheckBox
XChkBox.ID = "someId"
XChkBox.Text = "someText"
somePlaceHolder.Controls.Add(XChkBox);
}
}
</script>
I need to get the Text attribute of that check box on click. I tried $(this).attr('Text'); inside $('input[type=checkbox]').click(function(){}); but it returns undefined.
Where am I going wrong? Please suggest.
cheers
ASP .NET renders the Text property of the ASP:CheckBox server control, as a label element just after the <input type="checkbox" /> on the generated markup at the client, it looks something like this:
<input id="someId" type="checkbox" name="someId" />
<label for="someId"> someText </label>
You can get the text of the label by:
$("input:checkbox").click(function() {
var $label = $(this).next('label');
alert($label.text());
});
The CheckBox control renders the Text inside a <label> element. The text is not part of the HTML checkbox. If you want to get the text from jQuery, you have to get it from the <label>.
Also, the <label> it generates doesn't actually have an ID. If your CheckBox is named checkBox1, then the HTML it outputs will be <label for="CheckBox1">, and the text is inside that element. I believe the correct jQuery syntax would be:
$('label[for="checkBox1"]').html()
This depends on how you're implementing what you call "text".
If it's like this:
<input id="chkFoo" type="checkbox" text="Check me, fool!" />
Then you can access the text like this:
$("#chkFoo").attr("text")
If you do it like this
<input id="chkFoo" type="checkbox" />Check me, fool!
I think you're out of luck. Put a span around the text if you have to do it this way and grab it like this:
<input id="chkFoo" type="checkbox" /><span id="spnFoo">Check me, fool!</span>
$("#spnFoo").text()
I have a view where the user can change some settings, its basically a "edit" page. When the user checks a particular value in a radio group i set a hidden field (its a invisible input type=text field), but when i load the page i want that hidden field set from my code. How to do this? JQuery? or can i "findControl" somehow?
This is the "hidden" field:
<div style="display: none">
<input type="text" name="HiddenImageId" id="HiddenImageId" value="" />
</div>
The above hidden field is set from a jquery that executes when a radio-button is clicked. But when I load in "edit" mode I want myself to set the "hidden" field.
Further down my view i load all the radio-buttons:
<% if (file.Id == imageFile.Id)
{ %>
<input type="radio" checked="checked" name="filename" class="filename" id="<%= file.Id.ToString()%>" />
<% }
else
{ %>
<input type="radio" name="filename" class="filename" id="<%= file.Id.ToString()%>" />
<%} %>
When I set the checked attribute I want to set the value of my hidden fiddle to the files ID.
You would probably benefit a lot from making better use of the [Html Helpers] in ASP.NET MVC.
You could, for example, output your "hidden" text input like this:
<%= Html.TextBox("HiddenImageId", imageFile.Id) %>
If imageFile can be null, you might want to add a check for that - use shorthand if to make it look nice:
<%= Html.TextBox("HiddenImageId", imageFile != null ? imageFile.Id : "") %>
You could also probably improve your code for the radiobuttons significantly by using Html.RadioButton...
just like you are doing
id="<%= file.Id.ToString()%>"
you can do
<input type="text" name="HiddenImageId" id="HiddenImageId" value="<%= file.Id.ToString()%>" />
or whatever the code is to get your value
I'd suggest using the HtmlHelper extensions in both cases.
<div style="display: none">
<%= Html.TextBox( "HiddenImageId",
file.Id == imageFile.Id ? file.Id.ToString() : "" ) %>
</div>
<%= Html.RadioButton( "filename",
"",
file.Id == imageFile.Id,
new { #class = "filename", id = file.Id.ToString() } ) %>
or if you wanted to use a hidden input instead, skip the invisible DIV, and use
<%= Html.Hidden( "HiddenImageId",
file.Id == imageFile.Id ? file.Id.ToString() : "" ) %>