checkbox to disable/enable input

Question

I am using js to , onclick of a checkbox, it enables or disables text input.

It works, until I put it into a live form with google jquery api.

Weird but.. must be a conflict somewhere.

The form element is: ( code isnt adding to this post properly )

<input type="checkbox" name="others" onclick="enable_text(this.checked)" class="medium" /></div>

Name on credit card if different from above

The js is:

function enable_text(status)
{
status=!status;
document.form1.other_name.disabled = status;
}

What am I doing wrong, I have used body onload handler.

<body onload=enable_text(false);>

JS FIDDLE : http://www.jsfiddle.net/ozzy/H8VPY/4/

Šime Vidas · Accepted Answer · 2010-12-17 23:59:22Z

4

Here, a jQuery solution:

$("input:checkbox").click(function() {
    $("input:text").attr("disabled", !this.checked); 
});

Just replace these generic selectors with your more specific ones.

In addition to this code, you will probably also want to make the text-box disabled (initially).

<input type="text" disabled="disabled" />

Working demo: http://www.jsfiddle.net/H8VPY/11/

edited Dec 17, 2010 at 23:59

answered Dec 17, 2010 at 23:50

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

422 Over a year ago

I want the form element to be editable when ticked, disabled when not ticked

422 Over a year ago

works great, chosen as answer, but need to attribute to specific ID. I will sort that thanks

422 Over a year ago

Still struggling to apply this to the input ID, we must specify the ID, otherwise other input fields remain disabled/enabled

Šime Vidas Over a year ago

@422 Use the ID selector: $("#textboxID").attr(...);

BalusC · Accepted Answer · 2010-12-17 23:46:53Z

3

There are several problems in your jsfiddle demo.

The <script> and the comment there around should be removed.
A <form name="form1"> is missing which caused document.form1 to return nothing.
The onLoad option on left menu should be a no wrap (head) since it's just a function.

Updated demo: http://www.jsfiddle.net/PPZYm/

answered Dec 17, 2010 at 23:46

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

3 Comments

Šime Vidas Over a year ago

Adding the disabled="disabled" attribute to the text-box will suffice. That way, the text-box will initially be disabled.

BalusC Over a year ago

@Šime: Yes, can also, if that's the actual intent. I only wonder why the OP didn't include it in his own demo.

422 Over a year ago

Apologies for confusion, I had stripped some code to make it simpler and inadvertantly cocked it up. @Sime your code works A1 thanks.

subhaze · Accepted Answer · 2010-12-18 00:00:11Z

2

Live Example

function enable_text(status) {
    status = (status) ? false : true; //convert status boolean to text 'disabled'
    document.form1.other_name.disabled = status;
}

Note

You also need to wrap your div in the jsfiddle example with a <form> tag with the name form1 for it to properly work

<div class="controlset-pad">
    <input type="checkbox" name="others" onclick="enable_text(this.checked)" class="medium" />
</div>
<form name="form1">
    <div class="field4">
        <label>Name on credit card if different from above</label><input type="text" name="other_name" class="medium" disabled="disabled" />
    </div>
</form>

edited Dec 18, 2010 at 0:00

answered Dec 17, 2010 at 23:48

subhaze

8,8352 gold badges33 silver badges33 bronze badges

3 Comments

422 Over a year ago

I need the element to be disabled until ticked

Šime Vidas Over a year ago

You don't need that first line in the function body. ... = !status; works just fine.

422 Over a year ago

thanks but, disabled="disabled" remains disabled when we run it

Collectives™ on Stack Overflow

checkbox to disable/enable input

3 Answers 3

4 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related