I have made a radio button list in an aspx page in C#
<asp:RadioButtonList ID="RblMentor_teacher_student" class="case" runat="server"
RepeatDirection="Horizontal" AppendDataBoundItems="False" >
<asp:ListItem Text="Docent" Value="0"></asp:ListItem>
<asp:ListItem Text="Mentor" Value="1"></asp:ListItem>
<asp:ListItem Text="Student" Value="2"></asp:ListItem>
</asp:RadioButtonList>
It works perfectly as I want that it shows the selected person is either teacher or student or mentor.
But I want that no one can change the selection of this.
Can anyone help.
You could put this in your Page_load() and it would disable the whole list.
RblMentor_teacher_student.Enabled = false;
Or you could disable a specific list item
<asp:ListItem Text="Docent" Value="0" Disabled="Disabled"></asp:ListItem>
You can set Enabled property to false
On selectedindexchanged event of radiobutton..then put enable property false for selected item
Using jQuery:
Benefit of using this is that the checked value will be always post on submit.
$(function () {
$("input[type=radio]", $("#<%= RblMentor_teacher_student.ClientID%>")).each(function (index) {
if ($(this).attr("checked") != "checked") {
$(this).attr("disabled", "disabled");
}
});
});
Related
I am attempting to get a <div> to appear when a specific ListItem is selected.
In my code behind I have:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (reportedBefore.SelectedItem.Text=="yes")
{
reportedBeforePanel.Visible = true;
}
else
{
reportedBeforePanel.Visible = false;
}
}
I referred to this article here initially, which stated I needed a few things:
You need to Enable the AutoPostBack of the dropdownlist for raising the OnSelectedIndexChanged event on server side.
AutoPostBack="true"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged
Admittedly, I did not have an AutoPostBack before. After adding it, I am afraid for some reason the requested div still does not show.
<asp:DropDownList ID="reportedBefore" CssClass="larger-drop-2" AutoPostBack="true" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Text="Select" Value="Select"></asp:ListItem>
<asp:ListItem Text="No" Value="No"></asp:ListItem>
<asp:ListItem Text="Yes" Value="Yes"></asp:ListItem>
<asp:ListItem Text="Unsure" Value="Unsure"></asp:ListItem>
</asp:DropDownList>
<asp:Panel ID="reportedBeforePanel" runat="server" Visible="false">
<div id="showDiv">
<label for="yesDetails">
Please provide details
</label>
<asp:TextBox ID="yesDetails" CssClass="third-w-form" runat="server"/>
</div>
</asp:Panel>
Would someone be so kind to help me out here?
The problem is in the following if-condition:
reportedBefore.SelectedItem.Text=="yes"
By this, you are doing a case-sensitive string comparison (this is the default in .NET), but the values in your dropdownlist are written in a different way ("Yes" vs. "yes").
In order to fix this, either perform a case-insensitive string comparison
string.Compare(reportedBefore.SelectedItem.Text, "yes", true) == 0
or change the casing in the if-statement.
C# is case sensitive, so it's "Yes" not "yes":
reportedBeforePanel.Visible = reportedBefore.SelectedItem.Text == "Yes";
Alternatievely you can use this:
reportedBeforePanel.Visible = reportedBefore.SelectedItem.Text.Equals("yes", StringComparison.InvariantCultureIgnoreCase);
I have asp.net web form with lot of .net controls. where few of the controls are disabled depending on the input of another controls. All of the controls are required so i have to check for required validation as well.
I can disable the control using jquery but i am not able to disable the validation control.
Here is my code.. any better way of doing this will be very appreciable.
<script>
$('#<%=rdb_one.ClientID%> input:radio').click(function () {
var currentIdone = 'Humans';
var currentId = $(this).val();
if (currentId != currentIdone) {
$('#<%=rdb_two.ClientID%> input').attr('checked', false);
$('#<%=rdb_two.ClientID%> input').attr('disabled', 'disabled');
}
else {
$('#<%=lstExposureValue.ClientID%> input').removeAttr('disabled');
}
});
</script>
<asp:RadioButtonList CssClass="Required" ID="rdb_one" runat="server" OnSelectedIndexChanged="rdb_studysubj_SelectedIndexChanged">
<asp:ListItem Value="Humans">Humans</asp:ListItem>
<asp:ListItem Value="Non-Human primates">Non-Human primates</asp:ListItem>
<asp:ListItem Value="Rodents">Rodents</asp:ListItem>
<asp:ListItem Value="Others">Others</asp:ListItem>
</asp:RadioButtonList>
<br/>
<br/>
<asp:RadioButtonList CssClass="Required" ID="rdb_two" runat="server" OnSelectedIndexChanged="rdb_study_popul_SelectedIndexChanged">
<asp:ListItem>Individuals</asp:ListItem>
<asp:ListItem>Population</asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="vald_one" Display="None" ErrorMessage="Study Population is Required" runat="server" ControlToValidate="rdb_two"></asp:RequiredFieldValidator>
Here i disable the control "rdb_two" depending on the value from "rdb_one" but i am not able to disable the validation controls for "rdb_two" any ideas. i have this function repeatedly used over all the controls with in the same page.
You can use ValidatorEnable function
for example
ValidatorEnable(document.getElementById($(this).attr('id')), false);
I have a form containing two DropDowns lists:
Marital Status
No. of Children
Now I would like to enable the No. of Children DropDown upon selection of following items in the Marital Status DropDown:
Widow
Divorced
Awaiting Divorce
How can I do it?
In the MaritalStaus DropDownList Selected Index changed event, If the selected values match your options then enable the NoOfChild DropDownList.
protected void MaritalStaus_SelectedIndexChanged(object sender, EventArgs e)
{
//Match the selected value here : for Example:
if (MaritalStaus.SelectedValue.Equals("Divorced") || /*Other Comparisions */)
{
NoOfChild.Enabled = true;
}
}
DropDown lists have ListItem collection in them. Each ListItem has a Text and a Value. Try setting the text as "Divorced" and value as "D" or better to an integer like "1", something similar to ID. You will get these Text/Value from a Database table if you are retrieving it from the Database.
Make the No. of Children DropDown Enabled = false by default and then Enable = true as explained in the code snippet above by ebad86.
you can also use cascading dropdown from ajaxcontroltoolkit
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx
.aspx
<asp:DropDownList ID="ddlMaritalStatus" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlMaritalStatus_SelectedIndexChanged">
<asp:ListItem Text="" />
<asp:ListItem Text="Widow" />
<asp:ListItem Text="Divorced" />
<asp:ListItem Text="Awaiting Divorce" />
</asp:DropDownList>
<asp:DropDownList ID="ddlNoOfChildren" runat="server" Enabled="false">
<asp:ListItem Text="1" />
<asp:ListItem Text="2" />
<asp:ListItem Text="3" />
<!-- and so on -->
</asp:DropDownList>
aspx.cs
protected void ddlMaritalStatus_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlMaritalStatus.SelectedItem.Text == "Widow") // if widow is selected
ddlNoOfChildren.Enabled = true;
else
ddlNoOfChildren.Enabled = false;
}
I have done a code to disable a control when user clicks on a control. On my form i am having a TextBox and a DropDown. When user clicks on a TextBox i will disable the DropDown like that when click on DropDown i will disable the TextBox which works fine.
But when the user clicks on Disabled control i would like to enable that control. Means if i click on TextBox which was disabled i would like to Enable it like that for dropdown too..
My sample Script is as follows
<script type="text/javascript">
function toggleDropDownList1()
{
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
}
</script>
Design
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>
Apparently Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled, and any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree.
So, if you want to achieve something like that, you will probably have to do it with a workaround.
Instead of actually disabling the field try to style the fields to look as if they are disabled, that way you can still capture the click event.
The idea is to place a div in front of dropdown list, and this div accept the onclick event.
The issue here is that the div can not place so easy in front of dropdown list. To place it you need to do that dynamically and use the absolut position.
I make here a small code, and test it and working. I have left the background color RED on div to see where it is. Some details I left it to you, eg to find the width and height of your control list, I place the onclick, you can place back the double click, And just remove the red background.
<script type="text/javascript">
function toggleDropDownList1()
{
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "none";
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
var MyDdl = document.getElementById("<%= DropDownList4.ClientID %>");
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "block";
MyDiv.style.left = MyDdl.style.left;
MyDiv.style.top = MyDdl.style.top;
// need to find the height/width
// MyDiv.style.height = MyDdl.style.height;
// MyDiv.style.width = MyDdl.style.width;
}
</script>
and the asp code.
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<br /><br />
<div id="DivForClick" onclick="toggleDropDownList1();" style="z-index:999;position:absolute;left:0;top:0;height:20px;width:40px;background-color:Red;display:none;">
</div>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();" style="z-index:2;">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
</asp:DropDownList>
Do you mean
function toggleIt() {
var d=document.getElementById("<%= DropDownList4.ClientID %>");
var t =document.getElementById("<%= TextBox1.ClientID %>");
d.disabled=!d.disabled
t.disabled=!t.disabled
}
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleIt();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" disabled="disabled" onclick="toggleIt();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>
I have the code below with sets the focus on a textbox when the page loads and when the user selects a radio button.
How can I change this so that if they choose the last radio option "Mail" the focus is not set to
txtPayerName but instead to the btnSubmit control?
$(function () {
SetDefaultPaymentType();
$("#txtPayerName").focus();
$("#rdLstPaymentOptions").change(function () {
$("#txtPayerName").focus();
});
});
<asp:RadioButtonList ID="rdLstPaymentOptions" runat="server" RepeatColumns="3" RepeatDirection="vertical"
RepeatLayout="Flow" OnPreRender="rdBtnLst_PreRender" TabIndex="1"
ClientIDMode="Static">
<asp:ListItem Text="Credit Card " Value="CreditCard" ></asp:ListItem>
<asp:ListItem Text="Electronics Fund Transfer " Value="EFT"></asp:ListItem>
<asp:ListItem Text="Check By Mail " Value="Mail"></asp:ListItem>
</asp:RadioButtonList>
What if you set the change event on each radio button individually?
Something like:
$("#rdLstPaymentOptions").each(function (index) {
if (index == $("#rdLstPaymentOptions").length - 1) {
// insert code to set change event for last radio button
}
else {
($this).change = function () {
$("#txtPayerName").focus();
}
}
});
Give the radio button and the submit button a unique CSS class, then use:
$('.radioClass').click(function() {
$('.submitClass').focus()
})