Enable/Disable text boxes using jquery/javascript

Question

I use JQuery and I have a web page which lists multiple rows with radio buttons and text boxes in each row. I am trying to enable the textbox when I click on the radio button in a row. What I am expecting is - it should enable/disable the text box only in that row. It shouldnt enable/disable the text boxes in other rows.

By default all text boxes in each row is disabled on page load. I researched and I was able get a solution to enable a textbox which when I click on a radio button. Now when I select another radio button i expect the previously enabled text box should get disabled again and the text box in the current row should now get enabled. This is what I am trying to achieve.

I did lot of research and most answers doesnt suit the requirements. Please kindly help. I use JQuery, I tried to get solution with Jquery and javascripts as well.

Here is the code:

<div class="content">   
    <form name="selectedMatIds" action="@{addMaterialsToBuffer()}" method="POST">
    <div class="separator" style="margin-top:30px"><h4>Materials found</h4></div>
    <table class="table MaterialTable" id="makeZebras">
        <thead>
        <tr>
                <th class="alignLeft first">
                    Code
                </th>
                <th class="alignLeft">
                    Measure
                </th>
                <th class="alignLeft">
                    Unit
                </th>
                <th class="alignLeft">
                    New Unit
                </th>
            </tr>
        </thead>
        <tbody>
            #{list items:foundList, as:'mat' }
            <tr>
                <td>
                    <input type="radio" name="selectedMatIds" id="selectedMatIds" value="${mat.id}" onclick="getMaterialID()"> ${mat.materialCode} 
                </td>
                <td>
                    ${mat.bum}
                </td>
                <td>
                    ${mat.iumPerBum}
                </td>
                <td>
                <div id="group">
                    <input type="text" id="newIUM" name="${mat.id}" value="${newIUM}" disabled>
                    <input type="hidden" id="oldIUM" name="oldIUM" value="${mat.iumPerBum}">
                    <input type="hidden" id="bum" name="bum" value="${mat.bum}">
                    <a id="save" onclick="loadURL1()">Save</a> <a>Cancel</a>                        
                </div>
                </td>
            </tr>
            #{/list}
        </tbody>
        <div class="actions">
            <input type="submit" class="primary" value="Continue">
        </div>
    </table>

Now, the Jquery script:

$("input:radio[name='selectedMatIds']").click(function() {
    var isDisabled = $(this).is(":checked");
    var value = $(this).val();
    var textValue = $("#newIUM").val();
    alert(isDisabled);
    alert(value);
    alert(textValue);
    if(isDisabled) $("#newIUM").removeAttr("disabled");
    else $("#newIUM").attr("disabled", isDisabled);
});

You should really use .prop('disabled', isDisabled) instead of that attr/removeAttr mess. And to test if the element is checked: this.checked — ThiefMaster
– ThiefMaster, Commented Nov 8, 2012 at 1:28

Sushanth -- · Accepted Answer · 2012-11-08 01:30:49Z

2

Use .closest()

$("input:radio[name='selectedMatIds']").click(function() {
      var value = $(this).val();
      var $closest = $(this).closest('tr'); // Find closest tr 
      // Find the value of the textbox in current row
      var textValue = $closest.find('input[type="text"]').val(); 
        //  Disable All Text Boxes
      $('.MaterialTable input[type="text"]').prop('disabled' , true);  


      // Only enable the textbox of the particular row
      $closest.find('input[type="text"]').prop('disabled' , false);
});

answered Nov 8, 2012 at 1:30

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

2 Comments

Harish Over a year ago

thanks! This is an excellent solution. Now, I am able to disable/enable textboxes based on the radio button selection. However, I am not able to get the values entered in any of the text boxes starting row # 2. When I enter a value in the text box in row #1 I am able to get the values to my java code. But when I enter somethng in the text box in the subsequent rows, it is not able to pass the value. Before passing on the values to the java code, I am storing them to another text box which is shown just above the table.

Sushanth -- Over a year ago

I think the problem might be because of duplicated ID's on your page

Harish · Accepted Answer · 2012-11-14 22:12:26Z

0

Thanks for your help! I fixed this problem by writing the text box contents to a hidden text field when users click on the radio button and then pass this value from the hidden text field to the controller.

answered Nov 14, 2012 at 22:12

Harish

7261 gold badge12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Enable/Disable text boxes using jquery/javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related