根据选择选项更改，使用 jQuery 切换要禁用的输入？答案

【问题标题】：Using jQuery toggle an input to be disabled depending on select option change?根据选择选项更改，使用 jQuery 切换要禁用的输入？
【发布时间】：2015-10-29 20:53:40
【问题描述】：

我有一个选择下拉菜单：

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

还有一个输入：

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

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

按照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.

【问题讨论】：

标签： jquery select input onchange

【解决方案1】：

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

$( ".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/

【讨论】：

只需使用$(this) 而不是重复选择器。
感谢@Vince，这只是一个错字。我认为我可能会发疯，因为我不擅长 JavaScript，但看起来它应该可以解决 :)
获奖答案更详细，更清楚地表明了问题和解决方案。谢谢！

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

您在其中一个选择器中有问题，您使用的是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();

【讨论】：

【解决方案4】：

您应该使用属性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/

【讨论】：

虽然使用属性会起作用，但disabled 在技术上是一个属性而不是一个属性。它与导致问题的原因无关。
谢谢一堆，更有意义，但如果我没记错的话 attr() 被替换为 prop()？
请在此处发布您的答案，而不仅仅是小提琴链接。
@IndigoIdentity 不要被误导——你使用.prop()是完全正确的。此答案中提供的小提琴有效的原因是它纠正了其他答案中提到的选择器问题。
@Vince 你是对的，我错了。只是我过去在使用prop 而不是attr 时遇到了问题。我认为它有两个错误，而它只有一个。我应该删除这个答案吗？