Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #15112 > unrolled thread

Enable Disable UI Components using a ChackBox

Back to article view | Back to comp.lang.javascript

Contents

  Enable Disable UI Components using a ChackBox Pervez Mulla <mullapervez@gmail.com> - 2012-07-19 23:51 -0700
    Re: Enable Disable UI Components using a ChackBox Erwin Moller <erwinmollerusenet@xs4all.nl> - 2012-07-20 10:04 +0200
      Re: Enable Disable UI Components using a ChackBox Erwin Moller <erwinmollerusenet@xs4all.nl> - 2012-07-20 10:08 +0200
    Re: Enable Disable UI Components using a ChackBox "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-07-20 08:19 +0000
    Re: Enable Disable UI Components using a ChackBox "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-07-20 11:20 +0300

#15112 — Enable Disable UI Components using a ChackBox

Hello,

I am newbie, In my webpage I want to diaable some elements based on value of check box.All I want to do is, disable some components  when unchecking the Check-Box.and enable them, when checking the CheckBox.
Could you tell me please, how to do that using JavaScript/jquery ?

Thank You
Pervez

[toc] | [next] | [standalone]

#15113

On 7/20/2012 8:51 AM, Pervez Mulla wrote:
> Hello,
>
> I am newbie, In my webpage I want to diaable some elements based on value of check box.All I want to do is, disable some components  when unchecking the Check-Box.and enable them, when checking the CheckBox.
> Could you tell me please, how to do that using JavaScript/jquery ?
>
> Thank You
> Pervez
>


In Javascript you can find if checked for a checkbox simply by:
HTML:
<input type="checkbox" name="mycheckbox" value="Y" id="mycheckboxID">
Javascript:
var isChecked = document.getElementById('mycheckboxID').checked;
// isChecked  will be true/false

Or alternatively (without using an id, but via the form that contains 
the wanted element.)
var myCheckboxRef= document.forms["theformname"].elements["mycheckbox"];
var isChecked = myCheckboxRef.checked;

If you want to disable some element, simply set the disabled property to 
true or false.
eg:
HTML:
<INPUT type="text" name="firstname" value="" id="firstnameID">
Javascript:
document.getELementById('firstnameID').disabled = true;

If you want to remove a piece of text or something too, you can use the 
style.display and set it to appropriate values.
for example, for a DIV:
HTML:
<div id="sometimesVisibleDiv" style="display:none">
now you see me!
</div>
Javascript:
var myDiv = document.getELementById("sometimesVisibleDiv");
myDiv.style.display = "none";



Regards,
Erwin Moller

PS: For JQuery, please ask in a JQuery-related newsgroup/webforum. I 
have no idea. After reading many warnings in here from experienced 
Javascripters I decided to avoid it altogether.


-- 
"That which can be asserted without evidence, can be dismissed without 
evidence."
-- Christopher Hitchens

[toc] | [prev] | [next] | [standalone]

#15114

Correction:

> HTML:
> <div id="sometimesVisibleDiv" style="display:none">

should be
<div id="sometimesVisibleDiv" style="display:block;">

(Since I set it to display:none in the following code to make it invisible.)

Javascript:
var myDiv = document.getElementById("sometimesVisibleDiv");
myDiv.style.display = "none";

Regards,
Erwin Moller

-- 
"That which can be asserted without evidence, can be dismissed without 
evidence."
-- Christopher Hitchens

[toc] | [prev] | [next] | [standalone]

#15115

Pervez Mulla wrote on 20 jul 2012 in comp.lang.javascript:

> I am newbie, In my webpage I want to diaable some elements based on
> value of check box.All I want to do is, disable some components  when
> unchecking the Check-Box.and enable them, when checking the CheckBox. 
> Could you tell me please, how to do that using JavaScript/jquery ?

Especially when a newbie, DO NOT use jquery. See this NG's archive for why.

<input type=checkbox onclick='myDisable(this, "myOther");'>
<br>disables
<br><input id=myOther value='myOther one'>


<script type='text/javascript'>

function myDisable(t,that) {
   that = document.getElementById(that);
   that.disabled = t.checked;
};

</script>


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#15116

2012-07-20 9:51, Pervez Mulla wrote:

> In my webpage I want to di[s]able some elements based on value of check box.
> All I want to do is, disable some components  when unchecking the Check-Box.and enable them, when checking the CheckBox.
> Could you tell me please, how to do that using JavaScript/jquery ?

The simplest approach is to associate an onclick event handler with the 
checkbox element, e.g. <input type=checkbox onclick="toggle()" ...>, 
with toggle() defined as a function that processes the elements 
suitably. For the processing part, jQuery would make the code shorter 
and simpler than using a loop in pure JavaScript.

The details depend on many things. Can the elements in question be 
distinguisher e.g. by a class attribute, or in some other simpler way? 
What exactly does "disable" mean? Something like a disabled input box 
(visible but grayed out and not clickable, not contributing to form 
data)? Or empty space where the element appears when "enabled"? Or 
complete absence, causing a redraw of the page on every "disable" and 
"enable"?

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web