选择下拉菜单后，请使用Javascript和AJAX禁用特定的文本字段
[英]Once Drop Down is Selected, Disable specific text fields using Javascript and AJAX
问题描述
I am trying to disable certain text fields once a specific drop down item as been selected utilizing Javascript and AJAX. 
一旦尝试使用Javascript和AJAX选择了特定的下拉项，我就尝试禁用某些文本字段。 My HTML code is as follows: 我的HTML代码如下：
<html>
<li>
<span class="label">Rate Type: </span>
<label class="alignleft">
<select class="customSelect"name="Rate" onChange="findSelected()" id="Rate2">
<option>Fixed</option>
<option>Fixed</option>
<option value="variable">Variable</option>
</select>
</label>
</li>
<li>
<span class="label">Mortgage Interest Rate :</span>
<label class="alignleft"><span class="percent">%</span><input type="text" class="textfield" value=5 name="Iint"/></label>
</li>
<li>
<span class="label multiline">Amount Borrower want to repay: </span>
<label class="alignleft"><input type="text" class="textfield" value=10000 name="Ipay"/></label>
</li>
<li>
<span class="label multiline">Posted Interest Rate for Similar Mortgages</span>
<label class="alignleft"><span class="percent">%</span><input type="text" class="textfield" value=3 name="Iintsim"/></label>
</li>
<li>
<span class="label">Mortgage Interest Rate :</span>
<label class="alignleft twofield"><strong class="percent">%</strong><input type="text" class="textfield" value=1.30 Name="Mint" /></label>
</li>
</html>
My Javascript code is as follows: 我的Javascript代码如下：
function findSelected(){
var xhttpr = new XMLHttpRequest();
// xhttpr.open("GET","index.html",true);
// xmlhttp.send();
var rate= document.getElementById('Rate2');
var variable = document.getElementById('variable');
if(rate.value == "variable"){
alert("hi");
Iint.disabled=false;
Ipay.disabled=false;
Iintsim.disabled=false;
} else {
Iint.disabled=true;
Ipay.disabled=true;
Iintsim.disabled=true;
}
}
I'm sure I am doing something, if not many, things wrong. 我敢肯定我在做某事，即使不是很多，都做错了。 Please let me know. 请告诉我。 Thanks! 谢谢！
4 个解决方案
解决方案1
3 已采纳 2012-09-16 02:19:31
Try with something like this: 尝试这样的事情：
var $inputs = $('input'); // collection of inputs to disable
$('select').change(function(){
$inputs.prop('disabled', $(this).val() === 'Variable');
});
Demo: http://jsbin.com/udimos/1/edit 演示： http ： //jsbin.com/udimos/1/edit
解决方案2
2 2012-09-15 23:25:01
Your problem is that Iint, Ipay and IIntsim don't reference the DOM elements you want to change. 您的问题是Iint，Ipay和IIntsim没有引用您要更改的DOM元素。 Try changing the code to: 尝试将代码更改为：
function findSelected(){
var rate= document.getElementById('Rate2');
var variable = document.getElementById('variable');
if(rate.value == "variable"){
alert("hi");
document.getElementById('Iint').disabled=false;
document.getElementById('Ipay').disabled=false;
document.getElementById('Iintsim')disabled=false;
} else {
document.getElementById('Iint').disabled=true;
document.getElementById('Ipay').disabled=true;
document.getElementById('Iintsim').disabled=true;
}
} }
解决方案3
1 2012-09-17 02:45:22
You can't put an onclick event on an option of a select - you need to hook into the onchange event of the select instead. 您不能在选择的选项上放置onclick事件-您需要挂接到选择的onchange事件。
You will also need to give each option a value, eg 您还需要给每个选项一个值，例如
<option value="variable">Variable</option>
Basically, you fire "onchange" and then check which item is selected in the dropdown and decide what to do within your function (note that you just pass this, not this.form1.Rate): 基本上，您触发“ onchange”，然后检查下拉列表中选择了哪个项目，并决定在函数中要执行的操作（请注意，您只是传递了this，而不是this.form1.Rate）：
<select class="customSelect" name="Rate" onchange="javascript:OnChange(this);">
function OnChange(dropdown)
{
var myindex = dropdown.selectedIndex
var SelValue = dropdown.options[myindex].value
//now you know which value is selected, you can test it and call your disableField
if(SelValue=='variable'){disableField();}
}
have a look at this: http://www.codeproject.com/Articles/656/Using-JavaScript-to-handle-drop-down-list-selectio 看看这个： http : //www.codeproject.com/Articles/656/Using-JavaScript-to-handle-drop-down-list-selectio
解决方案4
0 2012-09-16 13:08:45
The full code should look like this: 完整的代码应如下所示：
<html>
<body>
<ul>
<li>
<span class="label">Rate Type: </span>
<label class="alignleft">
<select class="customSelect"name="Rate" onChange="findSelected()" id="Rate2">
<option>Fixed</option>
<option>Fixed</option>
<option value="variable">Variable</option>
</select>
</label>
</li>
<li>
<span class="label">Mortgage Interest Rate :</span>
<label class="alignleft"><span class="percent">%</span><input type="text" class="textfield" value=5 id="Iint"/></label>
</li>
<li>
<span class="label multiline">Amount Borrower want to repay: </span>
<label class="alignleft"><input type="text" class="textfield" value=10000 id="Ipay"/></label>
</li>
<li>
<span class="label multiline">Posted Interest Rate for Similar Mortgages</span>
<label class="alignleft"><span class="percent">%</span><input type="text" class="textfield" value=3 id="Iintsim"/></label>
</li>
<li>
<span class="label">Mortgage Interest Rate :</span>
<label class="alignleft twofield"><strong class="percent">%</strong><input type="text" class="textfield" value=1.30 Name="Mint" /></label>
</li>
</ul>
</body>
</html>
and the function should look like this: 该函数应如下所示：
function findSelected(){
var rate= document.getElementById('Rate2');
var variable = document.getElementById('variable');
if(rate.value == "variable"){
alert("hi");
document.getElementById('Iint').disabled=false;
document.getElementById('Ipay').disabled=false;
document.getElementById('Iintsim').disabled=false;
} else {
document.getElementById('Iint').disabled=true;
document.getElementById('Ipay').disabled=true;
document.getElementById('Iintsim').disabled=true;
}
}
As others have suggested though, using JQuery would make the code simpler and easier to maintain and give you options such as live binding, which could be useful as your application develops. 但是，正如其他人所建议的那样，使用JQuery将使代码更易于维护，并为您提供诸如实时绑定之类的选项，这对于您的应用程序开发可能会很有用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.