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

这是一个更清洁的解决方案：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

就像香蕉说的那样，有一些调整，把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 Fiddle demo

参考文献：

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

无法再次基于radiobutton启用/禁用jquery启用/禁用文本框

3 个答案: