Enable/Disable text boxes using jquery/javascript
<p>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. </p>

<p>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. </p>

<p>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.</p>

<p>Here is the code:</p>

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

<p>
</p>

<p>Now, the Jquery script:</p>

<pre><code>$("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);
});
</code></pre>
