問題jquery啓用/禁用基於radiobutton的文本框再次

Question

得到這件作品後，（Trouble shooting jquery enable/disable text box based on radiobutton）我發現我需要添加另一個字段到表單中，也被禁用，如果無線電選擇。

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

我已經重寫代碼，試圖理解它（我不知道的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

如香蕉說，有一些adjustement做，把IDS你的單選按鈕，每一次驗證你的代碼，有時你不」 t看到問題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 2

這裏是一個清潔的解決方案：在使用disabled屬性而不是使用腳本http://jsfiddle.net/8Jn44/

禁用輸入字段。

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

JS功能：（：廣播是可選的）

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

參考文獻：

• Attribute-equals ([attribute="value"]) selector。
• change()。
• prop()。