how to disable select element when checkbox is checked without refreshing the page

<input type="checkbox" id="chk1" name="chk1" onchange="javascript:toggleSelect();" value="1" />

In javascript:
function toggleSelect()
{

if document.getElementById("chk1").value == 1
{
document.getElementById("select").disabled = true;
}
else
{
document.getElementById("select").disabled = false;
}

}

Please make sure you give the id for all the tags. Otherwise, the code might not work.

Nov 10 '06 #2

khalidbaloch

dswethar thank for ur reply .. i tried it but it does not seem to work i put this code in a HTML document to try it .. please check it and let me know what i am doing wrong here

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">

function toggleSelect()

{
 
if document.getElementById("chk1").value == 1

{

document.getElementById("select").disabled = true;

}

else

{

document.getElementById("select").disabled = false;

}
 
}

</script><html>

<body>
 
<input type="checkbox" id="chk1" name="chk1" onchange="javascript:toggleSelect();" value="1" />

<select id="chk1" name="select">

<option value="value1">option 1</option>

<option value="value2">option 2</option>

<option value="value3">option 4</option>

</select></body>

</html>

Nov 10 '06 #3

Hi,

There was an id problem - select was not named. Here is the working script.

<html>
<head>

</head>
<script type="text/javascript" language="javascript">

</script>
<body>
<form name="frm1" id="frm1">
<input type="checkbox" id="chk1" name="chk1" onchange="javascript:toggleSelect();" value="1" />
<select id="select1" name="select1">
<option value="value1">option 1</option>
<option value="value2">option 2</option>
<option value="value3">option 4</option>
</select>
</form>
</body>
</html>

Nov 10 '06 #4

khalidbaloch

thanks agian dear friend great work , sorry to distrub you again ... but my target has not yet been achieved acctully i have two selects in my form and i want that whenever checkbox is checked both select should be disabled .i tried by adding an other select with the same id ..but not even a single select disabled ..

shortly what i want that there should be 1 checkbox and two selects whenever the checkbox is checked both selects should become disabled ..

Nov 11 '06 #5

Hi,

You should have another select box with a different name.

In the javascript, you need to add another statement in both the if and else condition, which have the second select box name.

eg:
document.frm1.select1.disabled = true;

just add another line
document.frm1.select2.disabled = true;

Same for else statement. Hope this helps.

Nov 12 '06 #6

khalidbaloch

thanks for coopration but my problem has been solved . i found this script on the net

Expand|Select|Wrap|Line Numbers

 <script Language="JavaScript"> 

var _T = "locked";

var _F = "unlocked";

function lockIt(_P) 

 {

   var _L = 

   document.aform.lck.value;

   if(_L==_P)return;
 
document.aform.sub_cat.disabled=(document.aform.lck.value=(_L==_F)?_T:_F)==_T;

document.aform.main_cat.disabled=(document.aform.lck.value=(_L==_F)?_T:_F)==_T;

}

function isDis() { 

return (document.aform.lck.value==_T); 

}

</script>

<form Name="aform" ID="aform" Action="" Method="post">

Sub Category : <select name="sub_cat" ID="sub_cat"  onfocus="if(isDis())blur();"> 

<option value="0" selected>Business</option> 

<option value="1">Graphics</option> 

<option value="2">Home &amp; Hobby</option>

<option value="3">Utilities</option>

<option value="4">Web utilities</option>

</select>

 Main Cat <select name="mian_cat" ID="main_cat"  onfocus="if(isDis())blur();"> 

<option value="0" selected>Business</option> 

<option value="1">Graphics</option> 

<option value="2">Home &amp; Hobby</option>

<option value="3">Utilities</option>

<option value="4">Web utilities</option>

</select

<br><br>

save & send : <input type=radio checked onclick="lockIt(_F)" id=radio1 name=radio1 value="1">

don not save only send :<input type=radio  onclick="lockIt(_T)" id=radio1 name=radio1 value="2"> 

<input type=hidden name="lck" value="unlocked"> 

</form>

this almost comes up to my need but if you can make some change in this script it will make me happier
the change i want is that it uses two radio elements to disable and enabled the selects and i want only one checkbox instead of two radios if user checks the checkbox option both selects should become disabled and if unchecks it it should turn enabled again .. this not mendatory but if you can do it ..

Nov 13 '06 #7

radio on when checkbox checked

Hi,

I have given you the code the way you want it. I am not able to understand the complete code that you have given. I am sorry about that.

You just have to add 2 sentences in the javascript now. Because you want 2 select boxes to be disabled / enabled.

Please try that. I am 100% sure that will work.

Nov 13 '06 #8

smithveg

Hi,

There was an id problem - select was not named. Here is the working script.

<html>
<head>

</head>
<script type="text/javascript" language="javascript">

</script>
<body>
<form name="frm1" id="frm1">
<input type="checkbox" id="chk1" name="chk1" onchange="javascript:toggleSelect();" value="1" />
<select id="select1" name="select1">
<option value="value1">option 1</option>
<option value="value2">option 2</option>
<option value="value3">option 4</option>
</select>
</form>
</body>
</html>

Thanks for the code. It works.

Nov 7 '08 #9

Similar topics

by: John Mullen | last post by:

I want to take the following HTLM and use javascript to turn on radio buttons if checkbox is checked, can I do this with javascript (maybe onClick or an array) or do i need a server side script ?...

how to make paragraph appear when checkbox checked?

by: AFN | last post by:

I want to click a checkbox and have a 4 line (approx) paragraph appear beneath the checkbox, pushing the rest of the page down. And when unchecking the checkbox, the paragraph should disappear...

Changing Data without Refreshing Page

by: Greg Scharlemann | last post by:

Given some recent success on a simple form validation (mainly due to the kind folks in this forum), I've tried to tackle something a bit more difficult. I'm pulling data down from a database and...

How display dynamic progress info in label control without refreshing page?

by: Ben | last post by:

Hi, One ASP.NET transactional page conducts a long transaction in a button click function. I want to display the transaction progress info in label control without refreshing page. It is...

ASP.NET

Retrieve ProductID from datagrid when checkbox checked.

by: sevenjerry | last post by:

I am having a problem retrieving the productID(column) in datagrid when check box in template column is checked. I need to loop through all rows in the datagrid and save the productID for rows...

Visual Basic .NET

autopostback without refreshing page. Asp.net

by: viral123 | last post by:

Hi all I have created one dropdown list box which contains all the employee name. By selecting the name from that list, it returns the details of that particular employee from the database. It...

ASP / Active Server Pages

Display subsets of data without refreshing page

by: madhu7sudan | last post by:

hi In a whole page i have one box and in that box there are many name ( like 1000) and i have display only 10 names and a link button more if i press on that linkbutton it shold display the...

javascript refresh a select box without refreshing page

by: cleary1981 | last post by:

Hi, I am trying to improve the usabilty of an app I have written and it would be great if I could refresh the content of my select boxes without refreshing the whole page. I am sure this could be...

using input value in same page without refreshing page

by: manuitpro | last post by:

Hi All, I have page with many tabs, in one of the tab i have a form (only a input box) and i want to show some output on the same tab view based on the user input. (bvy using php function) I...

PHP

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?