根据下拉列表值阻止输入框

时间:2014-05-27 10:38:13

标签: jsp

我有下拉列表,ids是cType和cId。另一个名为newName的输入框。 现在,当我在cType中选择EXTERNAL或在cId中选择其他时,我想启用输入框。 我做了这件事。但是没有工作。

function blockName(){
var dis1 = document.getElementsByname('cType').value;
var dis2 = document.getElementById('cId').value;
if (dis1 == 'EXTERNAL'|| dis2== '3')
    newName.disabled = false;

else
    newName.disabled = true;

}

下拉列表是 -

<tr>
<th colspan="1" align="right" > Type : </th>
<th colspan="1" align="left" style="width: 50px" >
<form:select path="" id="cType" onkeypress="blockName()">
<form:option value="X" label=" Select "/>
<form:option value="INTERNAL" label="student"/>
<form:option value="EXTERNAL" label="outsider"/>
</form:select>
</th>

<th align="left" >
<form:select name="cId" path="cId" id="cId" onkeypress="blockName()">
<form:option value="0" label="Select"/>
<form:option value="1" label="a"/>
<form:option value="2" label="b"/>
<form:option value="3" label="other"/>
</form:select>
</th>

,输入框

<th colspan="1" align="left">                       
<form:input class="iptext" id="newName" path="" name="newName" value="" placeholder="Name" disabled="true"></form:input>
</th>

1 个答案:

答案 0 :(得分:1)

您需要进行如下更改: 在javascript中,您需要调用getElementById而不是getElementsByName。此外,getElementById:

可以禁用/启用newName
    function blockName(){
        var dis1 = document.getElementById('cType').value;
        var dis2 = document.getElementById('cId').value;
        if (dis1 == 'EXTERNAL'|| dis2== '3'){
            document.getElementById('newName').disabled = false;
        }else{
            document.getElementById('newName').disabled = true;
        }
    }

当您使用spring form标签时,您不必使用name属性作为path属性来处理它。为此启用下线javascript函数在下拉更改时调用,您需要调用onchange而不是onkeypress函数:

    <form:select path="cType" id="cType" onchange="blockName()">
    <form:option value="X" label=" Select "/>
    <form:option value="INTERNAL" label="student"/>
    <form:option value="EXTERNAL" label="outsider"/>
    </form:select>

    <form:select path="cId" id="cId" onchange="blockName()">
    <form:option value="0" label="Select"/>
    <form:option value="1" label="a"/>
    <form:option value="2" label="b"/>
    <form:option value="3" label="other"/>
    </form:select>

    <form:input class="iptext" id="newName" path="newName" placeholder="Name" disabled="true"></form:input>