Trouble shooting jquery enable/disable text box based on radiobutton again

Question

After getting this piece right, ( Trouble shooting jquery enable/disable text box based on radiobutton ) I found I neede to add another field into the form, to also be disabled if the radio selection is made.

Seems to have broken the whole thing and I cannot find what the problem is.

I've rewritten the code to try and make sense of it (I don't know javascript at all)

<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">

and then

$(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);
    }
}

Please tell what I'm missing ...?

Answer 1

Here is a cleaner solution: http://jsfiddle.net/8Jn44/

Disabled input fields using disabled attribute rather than using script.

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

JS function: (:radio is optional)

$("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

Like Banana said, there's some adjustement to do, put ids to your radio buttons, validate your code every time, sometimes you don't see the problem http://validator.w3.org/ , i don't think that w3school is the best place to start www.w3fools.com, Mozilla Mdn seams to be better https://developer.mozilla.org/docs/Web/JavaScript also you have many ebooks online.

Nikhil's solution is good you can just reduce it a little bit :

$(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

I'd suggest the following:

// 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 .

References:

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