根据下拉列表中的选择禁用输入字段

时间:2010-03-29 03:04:14

标签: javascript html user-input

我有一个下拉框和一些文本输入字段。根据用户选择的下拉菜单中的哪个项目,我想禁用一些字段。我想我没有正确定位输入字段,但我无法弄清楚问题是什么:

这是我到目前为止所获得的剧本:

$(document).ready(function(){
var customfield = $('#customfields-tf-19-tf');
var customfield1 = $('#customfields-tf-20-tf');
var customfield2 = $('#customfields-tf-13-tf');


$(function() {
  var call_table = {
    'Condominium': function() {
     customfield.attr("disabled");     
     },
    'Co-Op': function() {
     customfield1.attr("disabled");
     },
    'Condop': function() {
     customfield2.attr("disabled");
     }
  };

  $('#customfields-s-18-s').change(function() {
    call_table[this.value]();
  });

});

});

我的表单的布局:

<td width="260" class="left">
<label for="customfields-s-18-s">Ownership (Required):</label>
</td>
<td class="right">
<select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" size="" >
<option value="Condominium"> Condominium</option>
<option value="Co-Op"> Co-Op</option>
<option value="Condop"> Condop</option>
</select>
</td>
</tr> 



<tr>
<td width="260" class="left">


  <label for="customfields-tf-19-tf">Maintenance:</label>
</td>
<td class="right">
  <input type="text" title="Maintenance" class="textInput" name="customfields-tf-19-tf" id="customfields-tf-19-tf"  size="40"/>
</td>

</tr>


<tr id="newsletter_topics">
<td width="260" class="left">

  <label for="customfields-tf-20-tf">Taxes:</label>
</td>
<td class="right">
  <input type="text" title="Taxes" class="textInput" name="customfields-tf-20-tf" id="customfields-tf-20-tf"  size="40" />
</td>
</tr>


<tr>
<td width="260" class="left">

  <label for="customfields-tf-13-tf" class="required">Tax Deductibility:</label>
  </td>
<td class="right">
  <input type="text" title="Tax Deductibility" class="textInput" name="customfields-tf-13-tf" id="customfields-tf-13-tf" size="40" />
 </td>
 </tr>

1 个答案:

答案 0 :(得分:1)

我相信为了禁用您需要使用的输入:

$(input).attr("disabled", "disabled");

此外,其中一些功能可能对您有用:

$.fn.enable = function() {
  return this.removeAttr('disabled');
}

$.fn.disable = function() {
  return this.attr('disabled', 'disabled');
}

$.fn.disenable = function(val) {
  if (val)
    return this.enable();
  else
    return this.disable()
}

$.fn.toggleEnabled = function() {
  if (this.attr('disabled') == 'disabled')
    return this.enable();
  else
    return this.disable();
}

一旦定义了它们,就可以在任何jQuery变量上使用它们,如下所示:

$(input).toggleEnabled();