0

一旦使用 Javascript 和 AJAX 选择了特定的下拉项，我试图禁用某些文本字段。我的 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>

我的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;
    }
}

我确定我正在做一些事情，如果不是很多，事情是错误的。请告诉我。谢谢！

4

4 回答 4

3

尝试这样的事情：

var $inputs = $('input'); // collection of inputs to disable
$('select').change(function(){
  $inputs.prop('disabled', $(this).val() === 'Variable');
});

演示：http: //jsbin.com/udimos/1/edit

于 2012-09-16T02:19:31.867 回答
2

您的问题是 Iint、Ipay 和 Intsim 没有引用您要更改的 DOM 元素。尝试将代码更改为：

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

}

于 2012-09-15T23:25:01.940 回答
1

您不能将 onclick 事件放在 select 的选项上 - 您需要挂钩到 select 的 onchange 事件。

您还需要给每个选项一个值，例如

<option value="variable">Variable</option>

基本上，您触发“onchange”，然后检查在下拉列表中选择了哪个项目并决定在您的函数中执行什么操作（请注意，您只是传递这个，而不是 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();}  
}

看看这个： http: //www.codeproject.com/Articles/656/Using-JavaScript-to-handle-drop-down-list-selectio

于 2012-09-17T02:45:22.780 回答
0

完整的代码应如下所示：

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

该函数应如下所示：

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

正如其他人所建议的那样，使用 JQuery 将使代码更简单、更易于维护，并为您提供实时绑定等选项，这在您的应用程序开发时可能很有用。

于 2012-09-16T13:08:45.007 回答