Develop Reference

Disable dropdown list when the checkbox is checked?

My View code in MVC: I want to disable the Dropdownlist in View code when the checkbox is checked.
function SaveNewGroup() {
var group = RetrieveGroup();
var IsChecked = $(IsAssociation).is(":checked");
var url = (IsChecked) ? "/Administration/SaveNewGroupforIsAssociation" : "/Administration/SaveNewGroup";
var userID = $('#groupunderwriter').val();
$.ajax({
type: "POST",
url: url,
data: group,
datatype: "json",
success: function (groupID) {
if (groupID > 0) {
GetGroups();
$('#groupdialog').dialog('close');
}
else {
alert("Unable to create Group.");
}
}
});
}
Check box:
<tr>
<td>
<label>Is Association</label></td>
<td>
<input type ="checkbox" id="IsAssociation"/>
</td
>
and my dropdownlist:
<tr>
<td>Underwriter Name:</td>
<td>
<select id="groupunderwriter" style="width:150px;">
<option value ="0"></option>
#foreach (RMS.UserService.User u in Model.GroupUnderWriters)
{
<option value="#u.UserID">
#if(Model.MasterGroupAttribute.UserID == u.UserID)
{
#:selected="selected"
}
>#(u.FirstName + " " + u.LastName )</option>
}
</select>
</td>
</tr>
How to disable the dropdownlist when the checkbox is checked or enable it when not checked?

A short version would look like this:
$('#IsAssociation').change(function() {
$('#groupunderwriter').attr('disabled', $(this).is(':checked'));
});

Have a look at this fiddle. It works fine for me. i don't know why all the above are not working for you. I just used the jQuery ON event listener in case you have a race condition and these elements don't exist when you are creating a binding for them. Unlikely but hey, my example works. This isn't the ideal way to do it but it may give you some insight as to whatever is wrong with your code.
<input type ="checkbox" id="IsAssociation" /><span>your checkbox</span>
<br/>
<br/>
<select id="groupunderwriter" style="width:150px;">
<option value ="0">Hello</option>
<option value ="1">Goodbye</option>
</select>
$(document).on('change', '#IsAssociation', function(){
if($(this).prop('checked')){
$('#groupunderwriter').attr('disabled', 'disabled');
} else {
$('#groupunderwriter').removeAttr('disabled');
}
});
http://jsfiddle.net/T83vs/

I think prop is a better way to do it.
$("#groupunderwriter").prop("disabled", IsChecked);
Of course you can also use $("#checkbox").is(":checked") instead of IsChecked.

I cannot see any checkbox there, Anyway this is the simple jquery code to disable dropdown on checkbox checked.
$(function() {
$('#id_of_your_checkbox').change(function() {
if ($(this).is(':checked')) {
// disable the dropdown:
$('#id_of_dropdown').attr('disabled', 'disabled');
} else {
$('#id_of_dropdown').removeAttr('disabled');
}
});
});

selecting incorrect value HTML <select>

I have HTML:
<select class="form" id="select" name="select">
<option>number1</option>
<option>number2</option>
</select>
<select name="organisation" class="form" id="cent" required>
<option value="1">UK</option>
<option value="2">SPAIN</option>
</select>
And another <select>:
<select class="form" id="ssip" name="organisation">
<option value="47" >US</option>
<option value="48">UKRAINE</option>
</select>
JQuery to show on 1 - first select on 2 - second
$(document).ready(function() {
$("#select").each(function () {
if (this.value == "1") {
$('#cent').show();
$('#ssip').hide();
}
if (this.value == "2") {
$('#cent').hide();
$('#ssip').show();
}
});
});
The problem is that when i choose option number1 appears first select with values 1 and 2 but when i select UK with value 1 and click submit it's sending value 47 , of second select's first option..

Try disabling the opposite select when toggling the selects. A control on a form will still be submitted if its display is set to none, however if the control is disabled it will not be submitted with the form.
$(document).ready(function() {
$("select").change(function () {
if (this.value == "number1") {
$('#cent').show().prop("disabled", false);
$('#ssip').hide().prop("disabled", true);
}
if (this.value == "number2") {
$('#cent').hide().prop("disabled", true);
$('#ssip').show().prop("disabled", false);
}
});
});
JS Fiddle: http://jsfiddle.net/bTJsH/

You are trying to loop one select box..
$("#select").each(function () {
There can be only one element with id "select". You should check like:
if ($("#select").value() == "1") { ..
And you don't even have values in your first select options..

i might suggest something like this
$('#select').on('change', function() {
var selected = this.selectedIndex;
$('.orgs').hide();
switch(selected) {
case 1:
$('#ssip').show();
break;
case 2:
$('#cent').show();
break;
}
});
here is an working example http://jsfiddle.net/pixelchemist/7ZGwy/

javascript affecting both drop downs

i have two drop downs, below is the code, my second dropdown is dependent to my first dropdown, so when i selected from first dropdown it will show options in second dropdown based on what i selected in the first. and then when i select an option from my second dropdown it will call a php page. but whats happening right now is when i select an option from my first dropdown, the page just refreshed and not giving option to select from second dropdown.
<tr>
<td align="center"><select name="Ticket" id="Ticket">
<option value="" selected="selected">Please Select...</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select></td>
<tr>
<td align="center"><select name="Category" size="1" id="Category">
<option value="" selected="selected">--</option>
<option value="Select1.php" class="Option1">Select1</option>
<option value="Select2.php" class="Option2">Select2</option>
</select><input type="submit" value="Go" id="submit"/></td>
</tr>
and here is my js code so that second dropdown would call the php page,
UPDATE: i've updated the jquery and page is not refreshing when i select from my first dropdown but whats happening now is its trying to redirect the page already as soon as i selected from first dropdown...i want that to happen on my second dropdown and not on the first...
$(function() {
$("#submit").hide();
$("#form1 select").change(function() {
window.location = $("#form1 select option:selected").val();
})
});

This should do the trick. The page will only redirect when you click the 'Go' button.
$(function () {
$('#Ticket').change(function() {
var optionClass = $(this).val();
$('#Category option:not(:first)').hide();
if (optionClass) {
$('#Category').find('.' + optionClass).show();
}
});
$('#submit').click(function () {
window.location = $("#Category").val();
});
});
If you want to redirect as soon as the second selectlist option is selected, replace the $('#submit').click.... with
$(function() {
$('#Ticket').change(function() {
var optionClass = $(this).val();
$('#Category option:not(:first)').hide();
if (optionClass) {
$('#Category').find('.' + optionClass).show();
}
});
$('#Category').change(function() {
var url = $(this).val();
if (url) {
window.location = url;
}
});
});

Change
$("#form1 select").change(function() {
window.location = $("#form1 select option:selected").val();
})
to
$("#Category").change(function() {
window.location = $(this).val();
})

hide <tr> based on selected radio button

I want to hide a table row based on the value selected from a radio button.
Those radio buttons were created based on value selected from a dropdown list box.
Here is my code
HTML code for listbox
<select name="txtLT" id="LT" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Jquery
$(document).ready(function() {
$("#LT").change(function() {
var selVal = $(this).val();
$("#tblerow").html('');
if(selVal == 'c') {
$("#tblerow").append('<td><input type="radio" id="cmpof" name="cmpof" value="1" onclick="show()" />1 <input type="radio" id="cmpof" name="cmpof" value="2" onclick="hide()"/>2</td>');
}
});
});
Now if radio button 2 is selected, then the table row with tr2 should disappear.
Please help me to find the solution.
EDIT
I tried the following JavaScript, but it does not hide the row.
function show() { document.getElementById('sbjrow').style.display = 'block'; }
function hide() { document.getElementById('sbjrow').style.display = 'none'; }
Could you please suggest what is wrong here?

You can just use the hide and show function of jQuery like so:
$(function () {
$('#LT').change(function () {
if ($(this).val() == 'c') {
$('.radios').show();
} else {
$('.radios').hide();
}
});
$('input[name=cmpof]').change(function () {
if ($('#LT').val() == 'c' && $(this).val() == 'bar') {
$('#table tr').eq(1).hide();
} else {
$('#table tr').eq(1).show();
}
});
});
If you don't want the table row to show up by default, just do it with css.
JsFiddle example: http://jsfiddle.net/AX5TJ/1/
Updated version that may be closer to what you want: http://jsfiddle.net/AX5TJ/2/
Also be carefull, you have a syntax error in your script : when you define $("#LT").change(function() {, you have to close with });

How to disable html form element with JavaScript?

There are two selection buttons which need client-side validation. The user must select one of them, and if user chooses one, the other one will be disabled automatically.
This my script:
<html>
<head>
<script type="text/javascript">
function Check() //this the funciton for diasbled
{
var x =document.getElementById("supexp1");
var y =document.getElementById("supexp2");
if(x.value != "")
{
document.form1.supexp2.disabled=true;
}
else if(y.value != "")
{
{
document.form1.supexp1.disabled=true;
}
}
}
</script>
</head>
<body>
<form method="POST" action="destination.php" id="form1">
<select name="SUPEXP" id="supexp1" data-native-menu="false" onChange="Check()">
<option >Ekspedisi Local1</option> //this selection 1
<option >Ekspedisi Local2</option> //this selection 1
<option >Ekspedisi Local3</option> //this selection 1
</select>
<select name="SUPEXP" id="supexp2" data-native-menu="false" onChange="Check2()">
<option >Ekspedisi Expor2</option> //this selection 2
<option >Ekspedisi Expor2</option> //this selection 2
<option >Ekspedisi Expor2</option> //this selection 2
</select>
</form>
</body>
</html>
I use the jquerymobile framework and selection connect to the database. That code (JavaScript) is not running.

I hope this is what you trying to do based on your description here is a jsfiddle
$(document).ready(function() {
$('#supexp1').change(function() {
$('#supexp2').attr("disabled" , "disabled")
});
$('#supexp2').change(function() {
$('#supexp1').attr("disabled" , "disabled")
});
});​

Try this code
if(x.value != ""){
document.getElementById("supexp2").disabled=true;
} else if(y.value != "") {
document.getElementById("supexp1").disabled=true;
}

I guess to get the value of the selected item you need to use some thing like this
var e = document.getElementById("supexp1");
var x = e.options[e.selectedIndex].value;
instead of
var x =document.getElementById("supexp1");
do the same for Y