CODEWITHSUNDEEP
javascriptjqueryhtml
Mdd
Mdd

Reputation: 4400

Enable and disable text field if either checkbox is checked

I have a form with 2 checkboxes and 2 sections of input text fields that are disabled.

If only the first checkbox is checked the following input text field should be enabled:

If only the second checkbox is checked the following input text fields should be enabled:

If both checkboxes are checked than all the input text fields should be enabled. The problem I have is that if both checkboxes are checked, then one is unchecked the 2 email text fields become disabled.

Here is a fiddle to what I have. I can use jQuery. http://jsfiddle.net/Ujxkq/

Here is my HTML:

<form id="myForm">
  <h3>Section 1</h3>
  Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableEmail(this.checked, 'emailAddr', 'emailConfirm');enableDisableSection1(this.checked, 'fullName');" />
  <p><input type="text" id="emailAddr" name="myEmailAddr" placeholder="Email" disabled /></p>
  <p><input type="text" id="emailConfirm" name="myEmailConfirm" placeholder="Confirm Email" disabled /></p>
  <p><input type="text" id="fullName" name="myFullName" placeholder="Full Name" disabled /></p>

  <h3>Section 2</h3>
  Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableEmail(this.checked, 'emailAddr', 'emailConfirm');enableDisableSection2(this.checked, 'color', 'size', 'model');" />
  <p><input type="text" id="color" name="myColor" placeholder="Color" disabled /></p>
  <p><input type="text" id="size" name="mySize" placeholder="Size" disabled /></p>
  <p><input type="text" id="model" name="myModel" placeholder="Model" disabled /></p>
</form>

Here is my Javascript:

function enableDisableEmail(isEnabled, email, confirm) {
    document.getElementById(email).disabled = !isEnabled;
    document.getElementById(confirm).disabled = !isEnabled;
}

function enableDisableSection1(isEnabled, fullName) {
    document.getElementById(fullName).disabled = !isEnabled;
}

function enableDisableSection2(isEnabled, color, size, model) {
    document.getElementById(color).disabled = !isEnabled;
    document.getElementById(size).disabled = !isEnabled;
    document.getElementById(model).disabled = !isEnabled;
}

Upvotes: 13

Views: 35363

Answers (3)

jcsanyi
jcsanyi

Reputation: 8174

You tagged this question with jQuery, but you're not using it so far.
Here's a version that uses jQuery:

jQuery(function($) {
    $('#checkboxOne, #checkboxTwo').click(function() {
        var cb1 = $('#checkboxOne').is(':checked');
        var cb2 = $('#checkboxTwo').is(':checked');
        $('#emailAddr, #emailConfirm').prop('disabled', !(cb1 || cb2));
        $('#fullName').prop('disabled', !cb1);
        $('#color, #size, #model').prop('disabled', !cb2);    
    });
});

You can remove all onclick attributes on the checkboxes themselves if you're using this version.
The updated fiddle for this version is here: http://jsfiddle.net/tB7Yz/

Upvotes: 12

jcsanyi
jcsanyi

Reputation: 8174

Instead of just toggling back and forth every time, check the status of both checkboxes, and decide whether each field should be enabled or disabled based on that.

You can simplify it down to a single function that gets called onclick of either checkbox:

function enableDisableAll() {
    var cb1 = document.getElementById('checkboxOne').checked;
    var cb2 = document.getElementById('checkboxTwo').checked;
    document.getElementById('emailAddr').disabled = !(cb1 || cb2);
    document.getElementById('emailConfirm').disabled = !(cb1 || cb2);
    document.getElementById('fullName').disabled = !cb1;
    document.getElementById('color').disabled = !cb2;
    document.getElementById('size').disabled = !cb2;
    document.getElementById('model').disabled = !cb2;
}

Updated fiddle is here: http://jsfiddle.net/p8gqZ/1/

Upvotes: 7

Neobta
Neobta

Reputation: 29

I changed a little your code an used Jquery

$(document).ready(function(){
var changeStatus = function(){
    var fne = $("#checkboxOne").prop("checked");
    $("#fullName").prop("disabled", !fne);

    var csme =$("#checkboxTwo").prop("checked");
    $("#color").prop("disabled", !csme);
    $("#size").prop("disabled", !csme);
    $("#model").prop("disabled", !csme);

    var any= fne || csme;
    $("#emailAddr").prop("disabled", !any);
    $("#emailConfirm").prop("disabled", !any);
};


$("#checkboxOne").on("change", changeStatus);
$("#checkboxTwo").on("change", changeStatus);

});

Fiddle

Upvotes: 2

Related Questions