在javascript中创建函数以启用/禁用基于select的输入

Question

我有基于选择的启用/禁用输入的代码，它可以工作。我意识到要使它成为一个函数，这样我就可以在需要的时候很容易地使用它。这是我目前的密码。

脚本

function ed(select, input){
    var $select= $(select),
        $input = $(input);
    $select.change(function() {
        if ($select.val() == 'Others') {
            $input.removeAttr('disabled');
        } else {
            $input.attr('disabled', 'disabled').val('');
        }
    }); //.trigger('change'); // added trigger to calculate initial state
        }

html

<form>
  <select id="trigger" change="ed('trigger', 'show-hide')" >
    <option>text here</option>
    <option>text2 here</option>
  </select>
  <input type="text" value="" id="show-hide" />
</form>

Answer 1

id选择器应以#YOUR_ID作为前缀

每次调用change函数时，都会附加ed处理程序。

避免使用inline-event-binding

试试这个：

​

var $select = $('#trigger'),
  $input = $('#show-hide');
$select.change(function() {
  if ($select.val() == 'Others') {
    $input.removeAttr('disabled');
  } else {
    $input.attr('disabled', 'disabled').val('');
  }
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
  <select id="trigger">
    <option>text here</option>
    <option>text2 here</option>
    <option value='Others'>Others</option>
  </select>
  <input type="text" value="" id="show-hide" />
</form>

​

使用您的方法的：

​

function ed(select, input) {
  var $select = $('#' + select),
    $input = $('#' + input);
  if ($select.val() == 'Others') {
    $input.removeAttr('disabled');
  } else {
    $input.attr('disabled', 'disabled').val('');
  }
}
ed('trigger', 'show-hide');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
  <select id="trigger" onchange="ed('trigger', 'show-hide')">
    <option>text here</option>
    <option>text2 here</option>
    <option value='Others'>Others</option>
  </select>
  <input type="text" value="" id="show-hide" />
</form>

​

注意： onchange应该是属性，用于侦听更改事件，而不是change。

编辑：在您当前的代码中，实现了inline和javascript事件绑定，这将导致意外的输出。

Answer 2

替换

 change="ed('trigger', 'show-hide')"

使用

 change="ed('#trigger', '#show-hide')"

正如人造丝的回答上面提到的，您需要传递id选择器。

这是整体工作代码

<select name="state" class="select" onchange="ed('#state', '#province')" id="state">
    <option value="something">Something</option>
    <option value="Others">Other</option>
</select>

<input type="text" name="province" class="text" id="province" />

请注意，上面的change已被onchange替换

function ed(select, input)
{
    var $select = $(select),
    $input = $(input);
    if ($select.val() == 'Others') {
        $input.removeAttr('disabled');
    } else {
        $input.attr('disabled', 'disabled').val('');
    }
}
$(document).ready( function(){

   ed('#state', '#province');

} );

Answer 3

脚本:

function enableDisable(selectName, inputName){
     var selectVal = $("select[name='"+selectName+"']").val();
     if(selectVal == 'Others'){ 
          $("input[name='"+inputName+"']").removeAttr('disabled');
     }else{
          $("input[name='"+inputName+"']").attr('disabled','disabled').val('');
     } 
    }

HTML :

<form>
  <select name="trigger" change="enableDisable('trigger', 'show-hide')" >
    <option value = "1">text here</option>
    <option value = "Others">Others</option>
  </select>
  <input type="text" value="" name="show-hide" />
</form>