在輸入的文本上更改文本框邊框顏色

Question

我有checkbox ，當checkbox被選中在附近textbox 的邊框顏色應該變成綠色，如果它沒有被選中的textbox 的邊框顏色應為紅色。 jQuery代碼：

$('#item_availability1_unlimited').on('change', function () {

    if ($('#item_availability1_unlimited').is(':checked')) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
});

小提琴

我已經完成了以上部分，我需要的是以下內容：

同樣，如果textbox為空，則其邊框顏色應為紅色，如果輸入文本，則其邊框顏色 textbox為綠色。

Answer 1

這是因為您忘記在小提琴中包含jQuery。

從“ Frameworks and Extensions選項卡中選擇jQuery ，它應該可以工作。

更新小提琴

---

編輯：根據您的評論，您需要使用：

$('#item_availability1_unlimited').on('change', function () {

    if ($('#item_availability1_unlimited').is(':checked')) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
}).change();

$('#item_availability1').on('keyup', function () {
 if ($(this).val().length > 0) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
});

更新小提琴