Question

我正在制作一张表格。尝试仅根据输入的值读取输入字段。

<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

如果有人点击女性，那么文本字段的id为“age”＆amp; “phone”变为只读，并将背景颜色更改为灰色。

请指导我如何将输入输入设为只读。

Answer 1

您似乎想要禁用输入。

使用jQuery：

$(".inputname").attr("disabled", true);

Answer 2

Here's a fiddle

<input type="radio" name="sex" onchange="checkthatshit('male');" value="male">Male<br/>
<input type="radio" name="sex" onchange="checkthatshit(this);" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

和JS

<script>
function checkthatshit(el){
    if(el !== "male" && el.checked){
        document.getElementById('age').disabled = true;
        document.getElementById('hobbies').disabled = true;
    }else{
        document.getElementById('hobbies').disabled = false;
        document.getElementById('age').disabled = false;
    }
}
</script>

Answer 3

如果您使用的是jQuery，请使用以下代码段添加或删除性别选择中的只读属性。

jQuery代码

$("input[type=radio]").click(function(){        
    if($(this).val() == 'female'){
        $("#age").attr("readonly", "readonly");
        $("#phone").attr("readonly", "readonly");
    }else {
        $("#age").removeAttr("readonly");
        $("#phone").removeAttr("readonly");
    }
});

http://jsfiddle.net/01vqyL9f/

将输入字段类型更改为仅使用JavaScript进行读取

3 个答案: