使用 jQuery 根据 select 选项更改切换要禁用的输入？

Question

我有一个 select 下拉菜单：

<select class="selector">
  <option value="Yes">Enabled</option>
  <option value="No">Disabled</option>
</select>

输入：

<input type="text" class="tester" value="test">

我想做的是在 select 选项更改时切换输入上禁用的属性。因此，如果启用选项 selected，则应启用输入，反之亦然。

按照 jQuery change() 的说明，我试图让它工作，但它就是不想工作。不确定我在这里做错了什么，因为它看起来很简单：

$( ".selector" )
.change(function () {
  var selector = $("selector").val();
  if (selector == 'No') {
    $('.tester').prop( "disabled", true );
  } else {
    $('.tester').prop( "disabled", false );
  }
})
.change();

有人可以指出我的逻辑哪里出了问题吗？提前致谢！

A fiddle is available here.

Answer 1

您应该使用属性 disabled 而不是属性。

$( ".selector" )
.change(function () {
  var selector = $(".selector").val();
  if (selector == 'No') {
    $('.tester').attr( "disabled", "disabled" );
  } else {
    $('.tester').removeAttr( "disabled");
  }
})
.change();

给你：https://jsfiddle.net/517s881e/4/

另外，您的 selector 选择器有问题。你应该尽可能使用它，这样代码更容易理解

$( ".selector" )
.change(function () {
  var selector = $(this).val();
  if (selector == 'No') {
    $('.tester').attr( "disabled", "disabled" );
  } else {
    $('.tester').removeAttr( "disabled");
  }
})
.change();

像这样：https://jsfiddle.net/517s881e/5/

Answer 2

读取 .val() 时您的选择器不正确，试试这个

 $( ".selector" )
.change(function () {
  var selector = $(this).val();
  if (selector == 'No') {
    $('.tester').prop( "disabled", true );
  } else {
    $('.tester').prop( "disabled", false );
  }
})
.change();

如果仍然无法正常工作，请在浏览器中调试 "var selector" 赋值，或提醒该值以查看您正在使用的内容。

Answer 3

您在回调函数中使用了错误的选择器：

$( ".selector" )
.change(function () {
  var selector = $('selector').val(); // The problem is here
  if (selector == 'No') {
    $('.tester').prop( "disabled", true );
  } else {
    $('.tester').prop( "disabled", false );
  }
})
.change();

尝试将其更改为：

$( ".selector" )
.change(function () {
  var selector = $(this).val(); // Leverages "this" instead of repeating the selector
  if (selector == 'No') {
    $('.tester').prop( "disabled", true );
  } else {
    $('.tester').prop( "disabled", false );
  }
})
.change();

https://jsfiddle.net/517s881e/6/

Answer 4

您的其中一个选择器有问题，您正在使用 selector，因此缺少 .。改成.selector，$(this)也行。

$( ".selector" )
.change(function () {
  var selector = $(".selector").val(); //HERE IS THE CHANGE. ALSO: $(this)....
  if (selector == 'No') {
    $('.tester').prop( "disabled", true );
  } else {
    $('.tester').prop( "disabled", false );
  }
})
.change();

使用 jQuery 根据 select 选项更改切换要禁用的输入？

Using jQuery toggle an input to be disabled depending on select option change?

jquery

select

input

onchange