Question

我想让输入字段仅在其他输入字段值的基础上读取，例如

<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>

如果有人选择女性，那么年龄输入应该是只读的，意味着它应该淡出然后不能输入值。这有可能，怎么样？

Answer 1

您是否尝试过使用JQuery？试试这个

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

Answer 2

这有几个选项，但基本上如果你想要一个淡入淡出效果，你需要一个颜色来显示过渡。我的答案是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');
    }
});

这是demonstration。

修改

在玩了这个之后，我改变了动画长度看起来更自然。

Answer 3

简单来说，你可以在javascript函数中禁用。

<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>

使输入字段仅读取其他输入字段的值

3 个答案: