You are viewing limited content. For full access, please sign in.

Question

Question

How to Make Fields in a Table Read-Only Depending on Drop-Down Selection in Same Table

Forms Version 9
Updated August 21, 2014
asked on August 5, 2014 • Show version history

We have a table where the first field will be a drop-down option with different services listed. There are 3 other fields in each row. Depending on the value selected from the drop-down list of services, we need to make the other 3 fields read-only. I know it's possible to do with jQuery, but I haven't been able to figure it out. Any help would be greatly appreciated.

0 0

Answer

SELECTED ANSWER
replied on August 6, 2014 • Show version history

What is the logic for making these fields read-only? Are there other values where you'd need to fill these fields in?

 

I tried your code and it is doing what it is written to do (it seems like it is working). However, if those are your only field values, the other fields will always be disabled.

 

Rather than saying "if this value isn't x" it might be better to say "if this value is x" with your conditions. That way, there won't be the overlap in your if statements there is now.

0 0

Replies

replied on August 5, 2014 • Show version history

This should get you started. Add the drop class to your drop-down column, and add the ro class to the fields you want to make read-only. As written, the code looks at the value selected in the drop-down and matches based on one of the possible values. You'll want to add more if statements here for your other drop-down choices.

 

$(document).ready(function () {

    $('.cf-table-block tbody tr').change(function () {

        //add if/else statements for each choice in the drop-down
        if ($(this).find('.drop option:selected').val() === "choice 1") {
            $(this).find('.ro input').attr('readonly', true);
        } else {
            $(this).find('.ro input').removeAttr('readonly');
        }
    });
});

 

0 0
View 10 previous replies
replied on August 5, 2014 • Show version history

Eric, thank you for the response. I forgot to mention that one of the 3 fields is a drop-down list. How do I alter the code to account for that?

0 0
replied on August 6, 2014 • Show version history

Add the ro class to your drop-down and use the following code. For drop-down fields, you need to disable them rather than making them read-only.

 

$(document).ready(function () {
    $('.cf-table-block').change(updateTable);

    function updateTable() {
        $('.cf-table-block tbody tr').each(function () {

            //add if/else statements for each choice in the drop-down
            if ($(this).find('.drop option:selected').val() === "choice 1") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);

            } else if ($(this).find('.drop option:selected').val() != "choice 2") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);

            } else {
                $(this).find('.ro input').removeAttr('readonly');
                $(this).find('.ro select').removeAttr('disabled');
            }
        });
    }
});

Updated with better code sample.

0 0
replied on August 6, 2014 • Show version history

UPDATED:

The new code to disable the drop-down works great. I am having problems getting the additional else if statements to work correctly though. If I add any additional statements then none of them work. Below is how I have them coded:

$('.cf-table-block tbody tr').change(function () {

        //add if/else statements for each choice in the drop-down
        if ($(this).find('.drop option:selected').val() != "Speech/Language Professional") {
            $(this).find('.ro input').attr('readonly', true);
            $(this).find('.ro select').attr('disabled', true);
        }
        else if ($(this).find('.drop option:selected').val() != "Physical Therapy Professional") {
            $(this).find('.ro input').attr('readonly', true);
            $(this).find('.ro select').attr('disabled', true);
        }
        else if ($(this).find('.drop option:selected').val() != "Occupational Therapy Professional") {
            $(this).find('.ro input').attr('readonly', true);
            $(this).find('.ro select').attr('disabled', true);
        }
        else {
            $(this).find('.ro input').removeAttr('readonly');
            $(this).find('.ro select').removeAttr('disabled');
        }
    });

I'm sure I'm just missing something, but I'm not sure what.

0 0
replied on August 6, 2014 • Show version history

Here's what it should look like:

 

$(document).ready(function () {
    $('.cf-table-block').change(updateTable);

    function updateTable() {
        $('.cf-table-block tbody tr').each(function () {

            //add if/else statements for each choice in the drop-down
            if ($(this).find('.drop option:selected').val() === "choice 1") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);

            } else if ($(this).find('.drop option:selected').val() != "choice 2") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);

            } else {
                $(this).find('.ro input').removeAttr('readonly');
                $(this).find('.ro select').removeAttr('disabled');
            }
        });
    }
});

Note that I updated the code sample to make sure it would work on newly added rows. That might have been the issue you ran into.
 

0 0
replied on August 6, 2014

Still having a problem with it. What you gave me works, but once I add another else if statement none of them work. This is the complete code I have.

 

$(document).ready(function () {

    //make freq code, hours and minutes read only
    $('.cf-table-block').change(updateTable);

    function updateTable() {
        $('.cf-table-block tbody tr').each(function () {

            //add if/else statements for each choice in the drop-down
            if ($(this).find('.drop option:selected').val() != "Speech/Language Professional") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);

            } else if ($(this).find('.drop option:selected').val() != "Physical Therapy Professional") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);

            } else if ($(this).find('.drop option:selected').val() != "Occupational Therapy Professional") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);

            } else {
                $(this).find('.ro input').removeAttr('readonly');
                $(this).find('.ro select').removeAttr('disabled');
            }
        });
    }
    //end make freq code, hours and minutes read only
  
});

 

0 0
SELECTED ANSWER
replied on August 6, 2014 • Show version history

What is the logic for making these fields read-only? Are there other values where you'd need to fill these fields in?

 

I tried your code and it is doing what it is written to do (it seems like it is working). However, if those are your only field values, the other fields will always be disabled.

 

Rather than saying "if this value isn't x" it might be better to say "if this value is x" with your conditions. That way, there won't be the overlap in your if statements there is now.

0 0
replied on August 6, 2014

The logic behind it is for Medicaid purposes. There should not be anything entered into the 3 field unless the selection from the drop-down menu is one of the 3 choices I mentioned above. If something is entered auditing becomes harder because something was entered that shouldn't have been for those services.

 

I'll try doing "if this value is x" and see if that works for me. Thank you for all of your help. I'll update the thread once I have more info.

0 0
replied on August 6, 2014

Works perfectly using the "if this value is x" method. Again, thank you for all of your help!

0 0
replied on August 6, 2014

You could try a different approach, where all the fields are read-only and then you enable them if necessary.

 

$(document).ready(function () {

    updateTable();
    $('.cf-table-block').change(updateTable);
    $('#q2').click(updateTable);

    function updateTable() {

        $('.cf-table-block tbody tr').each(function () {
            //make freq code, hours and minutes read only
            $(this).find('.ro input').attr('readonly', true);
            $(this).find('.ro select').attr('disabled', true);

            var value = $(this).find('.drop option:selected').val();

            if (value === "Speech/Language Professional" || value === "Physical Therapy Professional" || value === "Occupational Therapy Professional") {

                $(this).find('.ro input').removeAttr('readonly');
                $(this).find('.ro select').removeAttr('disabled');
            }
        });
    }

});

Replace #q2 with the ID for the table's Add button.

0 0
replied on August 21, 2014 • Show version history

I have a new problem. I have the following code based off your suggestions:

$(document).ready(function () {

    //make freq code, hours and minutes read only
    $('.cf-table-block').change(updateTable);

    function updateTable() {
        $('.cf-table-block tbody tr').each(function () {

            //add if/else statements for each choice in the drop-down
            if ($(this).find('.drop option:selected').val() === "Personal Care Service") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);

            } else if ($(this).find('.drop option:selected').val() === "Behavioral Intervention") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);

            } else if ($(this).find('.drop option:selected').val() === "Behavioral Consultation") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);
              
            } else if ($(this).find('.drop option:selected').val() === "PSR Professional") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);
              
            } else if ($(this).find('.drop option:selected').val() === "Psychotherapy/Counseling") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);
              
            } else if ($(this).find('.drop option:selected').val() === "Interpretive Services") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);
              
            } else if ($(this).find('.drop option:selected').val() === "Transportation") {
                $(this).find('.ro input').attr('readonly', true);
                $(this).find('.ro select').attr('disabled', true);
              
            } else {
                $(this).find('.ro input').removeAttr('readonly');
                $(this).find('.ro select').removeAttr('disabled');
            }
        });
    }
    //end make freq code, hours and minutes read only
  
  var d = new Date();
  document.getElementById("date").innerHTML = Date();
  
});

It works great when the initial form is filled out. How would I also get it to take it into account when the form is loaded? This same form is used in a QA step after the initial form is submitted.

0 0
replied on August 21, 2014 • Show version history

You need to call the function when the form loads. The behavior for that code was doing some odd stuff, so I modified it a little bit.

 

$(document).ready(function () {
    updateTable();

    //make freq code, hours and minutes read only
    $('.cf-table-block').change(updateTable);

    function updateTable() {
        $('.cf-table-block tbody tr').each(function () {
            var jobType = $(this).find('.drop option:selected').val();
            switch (jobType) {
                case "Personal Care Service":
                case "Behavioral Intervention":
                case "Behavioral Consultation":
                case "PSR Professional":
                case "Psychotherapy/Counseling":
                case "Interpretive Services":
                case "Transportation":
                    $(this).find('.ro input').attr('readonly', true);
                    $(this).find('.ro select').attr('disabled', true);
                    return;
                default:
                    $(this).find('.ro input').removeAttr('readonly');
                    $(this).find('.ro select').removeAttr('disabled');
                    return;
            }
            
        });
    }//end make freq code, hours and minutes read only
});


Update: I didn't include the date part you had at the bottom. It'd go the same place.

2 0
replied on August 21, 2014

Thank you! Works perfectly.

0 0
replied on August 21, 2014

You're welcome!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...