Question

我尝试在使用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;
    }
}

我确信我做的事情，如果不是很多，那就错了。请告诉我。谢谢！

Answer 1

尝试这样的事情：

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

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

Answer 2

你的问题是Iint，Ipay和IIntsim没有引用你想要改变的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;
}

}

Answer 3

你不能在选择的选项上放置一个onclick事件 - 你需要挂钩到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

Answer 4

完整代码应如下所示：

<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会使代码更简单，更易于维护，并为您提供实时绑定等选项，这在您的应用程序开发时非常有用。

选择下拉列表后，使用Javascript和AJAX禁用特定文本字段

4 个答案: