Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

  • 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;
}
like image 466
Mdd Avatar asked Jun 05 '13 01:06

Mdd


People also ask

What is enable and disable TextBox in click of checkbox?

When the CheckBox is clicked, the EnableDisableTextBox JavaScript function is executed. Inside this function, based on whether CheckBox is checked (selected) or unchecked (unselected), the TextBox is enabled or disabled by setting the disabled property to false or true respectively.

How do I enable a text field in a checkbox?

Enable the Text Field When the Checkbox Is CheckedSelect the Selected event in the list that appears, and then select the Enable/Disable action.

How do you show and hide input field based on checkbox selection?

To show or hide the field, we are applying CSS through jQuery css() method. We are passing CSS display property. To hide the field, we set the display property to none and to show it we set the display property block. So you have seen how to show or hide input field depending upon a checkbox field.


2 Answers

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/

like image 56
jcsanyi Avatar answered Oct 04 '22 13:10

jcsanyi


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

like image 27
Neobta Avatar answered Oct 04 '22 15:10

Neobta