Enable and disable text field if either checkbox is checked

Question

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:

Email
Confirm Email
Full Name

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

Email
Confirm Email
Color
Size
Model

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;
}

jcsanyi · Accepted Answer · 2013-06-05 01:36:33Z

12

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/

edited Jun 5, 2013 at 1:36

answered Jun 5, 2013 at 1:28

jcsanyi

8,2042 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mdd Over a year ago

Thanks. I did not use jQuery because I did not think it would be needed even though I do have it available. Sorry for tagging jQuery than if that was confusing.

jcsanyi Over a year ago

It's not a problem. If you've got jQuery available and loaded on the page already, I personally prefer this version because it's more compact and removes application logic (onclick) from being embedded in the HTML.

Mdd Over a year ago

Thanks jcsanyi. Would you mind explaining how the !(cb1 || cb2) evalutaes in the .prop() function? .prop('disabled', !(cb1 || cb2). I think I get that but I'm not sure that I do.

jcsanyi Over a year ago

the .prop('disabled', !(cb1 || cb2)) is the same as the non-jQuery code .disabled = !(cb1 || cb2), except that it runs against both of the IDs referenced in the $() function. || means OR, and ! means NOT. so (cb1 || cb2) means (checkbox1 is checked, or checkbox 2 is checked). That evaluates to true if either checkbox is checked, or false otherwise. That's backwards from what we need for the disabled property, so we negate it with !.

Mdd Over a year ago

Thanks jcsanyi. It's the negation, !, that I was not quite sure about. Thanks! :)

jcsanyi · Accepted Answer · 2013-06-05 01:29:21Z

7

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/

edited Jun 5, 2013 at 1:29

answered Jun 5, 2013 at 1:12

jcsanyi

8,2042 gold badges31 silver badges52 bronze badges

1 Comment

Paul Taylor Over a year ago

Better because does not require use of Jquery

Neobta · Accepted Answer · 2013-06-05 01:18:47Z

2

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

answered Jun 5, 2013 at 1:18

Neobta

293 bronze badges

2 Comments

Mdd Over a year ago

Thank you! I accepted the previous answer before I saw yours but thank you for showing me how to do it with jQuery.

jcsanyi Over a year ago

@Mdd I believe you can change the accepted answer if you want. I don't think this is a good example of jQuery though - see my second answer for a better example of what's possible here with jQuery.

Collectives™ on Stack Overflow

Enable and disable text field if either checkbox is checked

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related