Making input field read only on the value of other input fields

Question

I want to make the input field read only on the base of other input field value, for example,

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female <br/>
Age: <input type="text" name="age"><br>
</form>

If someone choose Female, then the age input should become read only, means that it should be fade out then no value can be entered. Is this possible, and how?

yes, it's possible. Just set the readonly property. If it's not working for you, please show your attempted code and we'll help you fix it. — Barmar
– Barmar, Commented Oct 6, 2014 at 1:41
@Barmar, i am trying to make readonly Age on the base of Male or female, if someone choose female then it should become readonly otherwise it remains same. — Rizz
– Rizz, Commented Oct 6, 2014 at 1:44
I know what you're trying to do, you said that in the question. Please show your code. — Barmar
– Barmar, Commented Oct 6, 2014 at 1:45

Louis Michael · Accepted Answer · 2014-10-06 02:23:10Z

3

Have you tried using JQuery? try this

$('input[type=radio][name=sex]').change(function() {
    if (this.value == 'female') {
        $("#AgeId").prop("readonly",true);
    }
    else{
        $("#AgeId").prop("readonly",false);
    }
});

edited Oct 6, 2014 at 2:23

answered Oct 6, 2014 at 1:46

Louis Michael

3981 silver badge12 bronze badges

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

2 Comments

Sean Over a year ago

you might want to include an else, so that when the value is changed the readonly is removed.

Louis Michael Over a year ago

I only based it on his statement but putting an else statement is a better idea.

Community · Accepted Answer · 2017-05-23 10:27:03Z

1

There are several options on this, but basically if you want a fade effect you need a color to go along with it to display a transition. My answer is an implementation of jQuery disable enable click event with fade

JQuery:

$('input[type=radio]').click(function () {
    if ($(this).val() == "female") {
        // disable input
        $('input[name=age]').fadeOut(20, function () {
            $(this).prop('disabled', true);
            $(this).css('background', '#c0c0c0').fadeIn(1000);
        });
    } else {
        //enable input
        $('input[name=age]').prop('disabled', false);
        $('input[name=age]').css('background', '#ffffff');
    }
});

Here is a demonstration.

EDIT:

After playing with this a little bit more I changed the animation lengths to look more natural.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Oct 6, 2014 at 2:13

EternalHour

8,6776 gold badges40 silver badges58 bronze badges

3 Comments

EternalHour Over a year ago

@dpDesignz, not sure why you didn't get credit for the edit after changing it slightly. But good insight.

dpDesignz Over a year ago

@EternalHour thanks. :). May I ask why you changed the fade values back? I thought you changed the animation for the smooth look. It's still the same on the fiddle?

EternalHour Over a year ago

@dpDesignz Yeah the fiddle still has the original values, which were the values you used in your edit. I had edited it after that with the new values but did not update the fiddle.

Kyi Kyi Thant · Accepted Answer · 2014-10-06 02:33:55Z

0

In simple way,you can do disable in javascript function.

<script language="javascript">
    function female_CLK(){
        document.getElementById("age").readOnly = true;
        document.getElementById("age").style.backgroundColor = "#CCCCCC";
    }
</script>

<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female" onclick="female_CLK()">Female <br/>
Age: <input type="text" name="age" id="age"><br>

answered Oct 6, 2014 at 2:33

Kyi Kyi Thant

921 silver badge10 bronze badges

Collectives™ on Stack Overflow

Making input field read only on the value of other input fields

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related