使用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根據選擇選項更改切換輸入被禁用？

回答

相關問題