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, Oct 06 '14 at 01: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, Oct 06 '14 at 01:44
see [Attribute Equals Selector \[name="value"\]](http://api.jquery.com/attribute-equals-selector/) and [`.prop()`](http://api.jquery.com/prop/) — Sean, Oct 06 '14 at 01:45
I know what you're trying to do, you said that in the question. Please show your code. — Barmar, Oct 06 '14 at 01:45

Louis Michael · Answer 1 · 2014-10-06T02:23:10.403

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 06 '14 at 02:23

answered Oct 06 '14 at 01:46

Louis Michael

398
1
12

you might want to include an `else`, so that when the value is changed the `readonly` is removed. – Sean Oct 06 '14 at 01:50
I only based it on his statement but putting an else statement is a better idea. – Louis Michael Oct 06 '14 at 02:21

score 1 · Accepted Answer · edited May 23 '17 at 10:27

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 '17 at 10:27

Community

1
1

answered Oct 06 '14 at 02:13

EternalHour

8,308
6
38
57

@dpDesignz, not sure why you didn't get credit for the edit after changing it slightly. But good insight. – EternalHour Oct 06 '14 at 02:59
@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? – dpDesignz Oct 06 '14 at 21:53
@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. – EternalHour Oct 06 '14 at 22:29

score 0 · Answer 3 · answered Oct 06 '14 at 02:33

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>

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

3 Answers3