form element disable script

[thenamenoonehastaken]

Hi,

Im working on a form that is generated by a database query with Coldfusion.

I have a few issues with Javascript as i am relatively new to it.

my form is

would anyone be able to show me how to i can make it so when the checkbox is checked the radio button and textarea become disabled ?

My form elements are named "Name" + ID of the database record at at any time can be up to 50 records on one screen.

I only want to disable the form elements that are numbered the same as the checkbox that is selected.

IE = if delete1 is checked then i need textarea1 and radio1 disabled.

This is probably a very simple task but right now it is absolutely beyond me...

my form is below

HTML: Select all

<form action="" method="">

<textarea name="Textarea1" cols="40" rows="5"></textarea>

<input type="radio" name="radio1" value="show">

<input type="Checkbox" name="Delete1" value="123">

</form>

[spinal007]

Step 1: Give your element IDs so that you can work with them via javascript
Step 2: Attach an "onchange" event to checkbox
Step 3: Use the value of "this.checked" to find out whether the checkbox is on/off
Step 4: Use that value to enable / disable the other elements

RESULT:

Code: Select all

<form action="" method="">
 <textarea name="Textarea1" id="Textarea1" cols="40" rows="5"></textarea>
 <input type="radio" name="radio1" id="radio1" value="show">
 <input type="Checkbox" name="Delete1" id="Delete1" onchange="
  document.getElementById('Textarea1').disabled = this.checked;
  document.getElementById('radio1').disabled = this.checked;
 " value="123">
</form>

ALTERNATIVE:
If you're starting up, I suggest you familiarize yourself with a library that takes care of browser compatibility for you. It can be very frustrating having to deal with these issues as an experienced developer - even more infuriating if you're a beginner.

Step 1: Give your element IDs so that you can work with them via javascript
Step 2: Get jQuery
Step 3: Use this code

Code: Select all

<form action="" method="">
 <textarea name="Textarea1" id="Textarea1" cols="40" rows="5"></textarea>
 <input type="radio" name="radio1" id="radio1" value="show">
 <input type="Checkbox" name="Delete1" id="Delete1" value="123">
</form>
<script language="javascript">
$(function(){
 $('#Delete1').change(function(){
  $('#Textarea1, #radio1').attr('disabled', this.checked);
 });
});
</script>

Techie note:
I'm sorry if I seem to be pushing everyone towards jQuery, but with a few years of experience, countless nights and cups of coffee under my belt, I think jQuery is the easiest way to introduce a beginner to jQuery - taking away the worries of cross browser compatibility.