How to cycle an Element from disabled to enabled in Javascript

Question

I have two fields on my webpage. When one of then is focused I want to disable the other one, but if the user then clicks the disabled field, I want it to disable the first fields and then enable the new focused field. Is this possible in javascript?

so far I've tried:

<script lang="text/javascript">

        function disableSum(){
            document.getElementById('BugID').disabled=false;
            document.getElementById('Summary').disabled=true;
            console.log('Sum Disabled');
        }

        function disableBug(){
            document.getElementById('BugID').disabled=true;
            document.getElementById('Summary').disabled=false;
            console.log('Bug Disabled');
        }

        function checkInput(){

        }

    </script>

You cannot do this - events are not fired on disabled inputs — Manse, Feb 16 '12 at 20:27
is there any way around this... i.e another attribute or some function that I can write? — Shahab, Feb 16 '12 at 20:30
Check the answer here -> http://stackoverflow.com/questions/3100319/jquery-event-on-a-disabled-input <- its using jQuery - but the principal is the same ... — Manse, Feb 16 '12 at 20:32
@Shahab - you could use CSS to style the field such that it looks like it's disabled but then still allow it to be clickable. — Zack Macomber, Feb 16 '12 at 20:32

score 2 · Accepted Answer · answered Feb 16 '12 at 21:10

2

The following idea might seem a little bit complicated, but you could play with a pair of visible/hidden fields to get this behavior.

See how it behaves here:

http://jsfiddle.net/TQxSh/

answered Feb 16 '12 at 21:10

Christophe

27,383
28
97
140

Thanks, this is kind of what I was looking for :) – Shahab Feb 17 '12 at 15:27

score 0 · Answer 2 · answered Feb 16 '12 at 20:27

0

From w3schools.com:

The disabled property sets or returns whether an element is disabled, or not.

A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers.

answered Feb 16 '12 at 20:27

Zack Macomber

6,682
14
57
104

is there anything similar to the disabled attribute that will allow me to do what I want? – Shahab Feb 16 '12 at 20:30
@ManseUK - wow - there's been some real mess-ups there based on that site. I will say though that I have found w3schools very helpful in the past many a time when needing to look up css and javascript attributes and use them. – Zack Macomber Feb 16 '12 at 20:35
@ManseUK - sorry, but some of the things that w3fools.com is purporting are not correct - for instance, they say "Professional web developers do not recommend the use of WYSIWYG editors." There are many web developers that use and highly recommend tools like Dreamweaver for development. I think a lot of opinions are expressed at that site but they aren't necessarily absolutely true. – Zack Macomber Feb 16 '12 at 20:46

How to cycle an Element from disabled to enabled in Javascript

2 Answers2