How to Enable/Disable TextBox Based On CheckBox Click in Web Applications that Generated by PHPMaker 10.0.5

As we have already known, PHPMaker has the ability by default to convert the ENUM field type (MySQL Database) becomes CheckBox element in the Add/Edit Form. Since the ENUM field type has the option values in it, then PHPMaker will add the bracket ([]) characters in the end of name and id property of the CheckBox element. For example, the field name is IsEmployee which is the ENUM field type with Y and N option values in it, then the Name and the ID of this CheckBox will become x_IsEmployee[] respectively.

Unfortunately, since the ID has been changed, then we as Web Developers could not use the standard jQuery code to trigger onclick event of this CheckBox element. Let’s say when your end-user is giving the checked mark at this CheckBox (for example, the name of the field is IsEmployee), then the next TextBox (for example, the name of the field is Employee_Name) below this CheckBox will be enabled, and vice-versa.

Did you ever have the difficulty when implementing the business logic to enable or disable the TextBox control based on the checked status that belongs to the CheckBox element in Add page of web applications that generated by PHPMaker? If so, then I will show you how to overcome this issue easily by using the jQuery code in Startup Script that belongs to the Add page.

Just insert the following code under this location: Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script of your PHPMaker project:

$(document).ready(function() {
    // Check if the form is loaded ...
    if($("input[name='x_IsEmployee[]']:checked").val()){
        $('#x_Employee_Name').removeAttr('disabled');
    } else {
        $('#x_Employee_Name').attr('disabled','disabled'); 
    }
    // Check if the CheckBox is being clicked ...
    $('input:checkbox[name="x_IsEmployee\[\]"]').click(function() {
        if (!$(this).is(':checked')) {
            $('#x_Employee_Name').attr('disabled','disabled'); 
            $('#x_Employee_Name').val('');
        } else {
            $('#x_Employee_Name').removeAttr('disabled');
            $('#x_Employee_Name').focus();
        }
    });
});

From the code above, then we have to handle the condition when the Add form/page is loaded. Also, we have to handle when end-user is clicking on the CheckBox control itself.

So simple, yet so powerful, right?