使用jQuery根据选择选项更改切换输入被禁用？

我有一个选择下拉菜单：使用jQuery根据选择选项更改切换输入被禁用？

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

和输入：

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

我所试图做的是切换输入时，选择选项更改disabled属性。所以如果选择的选项被启用，则应该启用输入，反之亦然。

继的笔记后，我试图让这个工作，但它只是不想。不知道我在做什么错在这里，因为它似乎将是直截了当：

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

来源

2015-10-29 Craig van Tonder

您正在使用的回调函数内一个坏选择：

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

来源

2015-10-29 21:00:17 Vince

只需使用'$（this）'而不是重复选择器。 – Barmar

好点，@Barmar。更新。 – Vince

谢谢@Vince那是现货，它只是错字。我认为我可能会生气，因为我对JavaScript不太好，但它看起来应该是这样:) –

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

来源

2015-10-29 20:57:48 Piyin

尽管使用属性将工作，'disabled'在技术上是一个属性，不是属性。这与导致此问题的原因无关。 – Vince

感谢堆，更有意义，但如果我没有错误attr（）被替换为prop（）？ –

请在这里发布您的答案，而不只是一个小提琴链接。 – Barmar

你选择读.VAL（）不正确时，试试这个

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

如果它仍然无法正常工作，请在“var selector”赋值的情况下在浏览器中进行调试，或者提醒该值以查看正在处理的内容。

来源

2015-10-29 20:58:01 Seano666

您在选择一个有问题，您正在使用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();

来源

2015-10-29 21:37:33

使用jQuery根据选择选项更改切换输入被禁用？

回答

相关问题