再次根據單選按鈕故障排除jQuery啟用/禁用文本框

Question

正確處理此部分后，（（ 根據單選按鈕故障排除jquery啟用/禁用文本框 ）我發現我需要在表單中添加另一個字段，如果選擇了單選，也將其禁用。

似乎已經破壞了整個問題，我找不到問題所在。

我已經重寫了代碼以嘗試並理解它（我一點也不懂javascript）

<input type="radio" name="radioknof" value="public" CHECKED/>
<label for "public">Anyone</label>
</br>
<input type="radio" name="radioknof" value="direct" />
<label for="direct">Specific</label>
</br>
<label for="newManagerFirstName">Manager's Firstname :</label>
<input type="text" name="newManagerFirstName" id='newManagerFirstName' value="1">
</br>
<label for="newManagerEmail">Manager's email address:</label>
<input type="text" name="newManagerEmail" id='newManagerEmail' value="2">

接着

$(window).load(setDefault());
$('input[name=radioknof]').on('click', UnOrLock());

function setDefault() {
    $("#newManagerEmail").prop("disabled", true);
    $("#newManagerFirstName").prop("disabled", true);
}

function UnOrLock() {
    if (this.checked && this.value == "public") {
        $("#newManagerEmail").prop("disabled", true);
        $("#newManagerFirstName").prop("disabled", true);
    } else {
        $("#newManagerEmail").prop("disabled", false);
        $("#newManagerFirstName").prop("disabled", false);
    }
}

請告訴我我所缺少的...？

Answer 1

這是一個更清潔的解決方案： http : //jsfiddle.net/8Jn44/

使用disabled屬性而不是使用腳本的禁用的輸入字段。

<input type="text" name="newManagerFirstName" id='newManagerFirstName' value="1" disabled>
<input type="text" name="newManagerEmail" id='newManagerEmail' value="2" disabled>

JS函數：（：radio是可選的）

$("input:radio[name='radioknof']").on('click',function () {
    if (this.checked && this.value == "public") {
        $("#newManagerEmail").prop("disabled", true);
        $("#newManagerFirstName").prop("disabled", true);
    } else {
        $("#newManagerEmail").prop("disabled", false);
        $("#newManagerFirstName").prop("disabled", false);
    }
});

Answer 2

就像Banana所說的那樣，需要做一些調整，將id放在單選按鈕上，每次都驗證代碼，有時您看不到http://validator.w3.org/這個問題，我不認為w3school是最好的網站開始www.w3fools.com，Mozilla Mdn會變得更好https://developer.mozilla.org/docs/Web/JavaScript網上也有很多電子書。

Nikhil的解決方案很好，您可以將其減少一點：

$(document).ready(function(){ $('[name=radioknof]').click(function(){ if (this.checked && this.value == "public") { $("#newManagerEmail, #newManagerFirstName").prop("disabled", true); } else { $("#newManagerEmail, #newManagerFirstName").prop("disabled", false); } }); });

Answer 3

我建議以下內容：

// selecting inputs whose 'type' attribute is equal to 'radio':
$('input[type="radio"]')
// binding change-event handler to those elements:
.on('change', function () {
    // selecting the relevant elements to be affected:
    $('#newManagerEmail, #newManagerFirstName')
    // updating the 'disabled' property of those selected elements,
    // if the changed radio-input is checked *and* its value is 'public',
    // the disabled property is set to true (it's disabled), otherwise it's
    // false and the input is enabled:
    .prop('disabled', (this.checked && this.value === 'public'));
// triggering the 'change' event, to ensure the inputs are disabled/enabled
// appropriately:
}).change();

JS小提琴演示 。

參考文獻：

• 屬性等於（ [attribute="value"] ）選擇器 。
• change() 。
• prop() 。