Question

我是javascript学习者并且一直在尝试这样做

两个单选按钮但是1但是2

两个文本框box1 box2

我需要做的是当选择but1时，box1应该是可编辑的，box2应该是只读的。当选择but2时，box2应该是可编辑的，box1应该是只读的。

在页面加载时，两个文本框都应该是只读的。

我的代码如下

<style type="text/css">
    .field-name {
        color:       #444;
        font-family: verdana;
        font-size:   0.85em;
        line-height: 2em;
    }
</style>

<script type="text/javascript">


    function makeChoice() {
        if (document.getElementById('but1').checked = true) {
            document.getElementById('box2').readonly = true;
        }
        else if (document.getElementById('but2').checked = true) {
            document.getElementById("box1").readonly = true;
        }

    }


</script>


<html>

<body>
<table>
    <input type="radio" id="but1" name="vals" onclick="makeChoice()">
    <input type="radio" id="but2" name="vals" onclick="makeChoice()">
    <input type="text" id="box1" value="abcde">
    <input type="text" id="box2" value="pqrst">
</table>
</body>

<html>

我不想禁用文本框但只能将它们设为readonly，因此在表单提交时我将拥有可以发送到服务器的文本框值。

我不知道我在这做什么错。任何帮助将不胜感激。谢谢

Answer 1

您需要设置“readonly”属性，如下所示：

document.getElementById('box2').setAttribute('readonly','readonly')

并将其清除，就像这个Ep>

document.getElementById('box2').setAttribute('readonly','')

Answer 2

在您的IF语句中，您正在设置一个变量，而不是测试它是处于一种状态还是另一种状态。你需要使用它：

if (document.getElementById('but1').checked == true) {

请注意，两个等于符号。这将检查两者是否相同。基本上，一个等于集，两个等于比较。当然，将两个IF语句都改为两个等号。

另外，你说onload都应该是readonly。为此，请添加

readonly="readonly"

到文本框。此外，当单击单选按钮时，您需要在相应的文本框上关闭readonly。

所以，完全是：

<style type="text/css">
    .field-name {
        color:       #444;
        font-family: verdana;
        font-size:   0.85em;
        line-height: 2em;
    }
</style>

<script type="text/javascript">
    function makeChoice() {
        if (document.getElementById('but1').checked) {
            document.getElementById('box2').setAttribute('readOnly','readonly');
            document.getElementById('box1').removeAttribute('readOnly','');
        } else if (document.getElementById('but2').checked) {
            document.getElementById('box1').setAttribute('readOnly','readonly');
            document.getElementById('box2').removeAttribute('readOnly','');
        }

    }
</script>


<html>

<body>
<table>
    <input type="radio" id="but1" name="vals" onclick="makeChoice()">
    <input type="radio" id="but2" name="vals" onclick="makeChoice()">
    <input type="text" id="box1" value="abcde" readonly="readonly">
    <input type="text" id="box2" value="pqrst" readonly="readonly">
</table>
</body>

<html>

Answer 3

基本上，您在条件上使用=代替==。此外，您始终必须在其中一个框上将readonly设置为false，或者在两次单击后最终会有两个只读框。试试这个：

编辑属性名称为readOnly，而不是readonly。代码也被编辑为直接操作属性，而不是使用setAttribute。查看jsfiddle上的工作版本：

function makeChoice() {
    document.getElementById('box1').readOnly = document.getElementById('but2').checked
    document.getElementById('box2').readOnly = document.getElementById('but1').checked
}

Answer 4

希望，这段代码可以提供任何帮助。

这是我的尝试：

http://jsfiddle.net/ylokesh/AAAVp/1/

Answer 5

你犯了几个错误。首先，您的css和javascript代码必须包含在<head>标记中，该标记应在<html>之后不久放置在<body>之前。其次你的if语句不正确：只用一个=符号为变量赋值，你必须使用两个（或在这种情况下为三个）来检查变量值，如下所示：{ {1}}。最后，您最好使用函数if (something == value)和setAttribute()来修改readonly属性的值。

完整的代码是：

removeAttribute()

单选按钮和文本框

5 个答案: