使用 jquery/javascript 启用/禁用文本框答案

【问题标题】：Enable/Disable text boxes using jquery/javascript使用 jquery/javascript 启用/禁用文本框
【发布时间】：2012-10-28 04:21:09
【问题描述】：

我使用 JQuery，并且我有一个网页，其中列出了多行，每行带有单选按钮和文本框。当我连续单击单选按钮时，我正在尝试启用文本框。我所期待的是 - 它应该只在该行中启用/禁用文本框。它不应该启用/禁用其他行中的文本框。

默认情况下，每行中的所有文本框在页面加载时都会被禁用。我进行了研究，并且能够获得一个解决方案来启用一个文本框，当我单击一个单选按钮时。现在，当我选择另一个单选按钮时，我希望之前启用的文本框应该再次被禁用，并且当前行中的文本框现在应该被启用。这就是我想要达到的目标。

我做了很多研究，大多数答案都不符合要求。请帮助。我使用 JQuery，我也尝试使用 Jquery 和 javascripts 获得解决方案。

代码如下：

<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>

现在，Jquery 脚本：

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

【问题讨论】：

你真的应该使用 .prop('disabled', isDisabled) 而不是那个 attr/removeAttr 混乱。并测试是否检查了元素：this.checked

标签： jquery

【解决方案1】：

使用.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);
});

【讨论】：

谢谢！这是一个很好的解决方案。现在，我可以根据单选按钮选择禁用/启用文本框。但是，我无法获取从第 2 行开始的任何文本框中输入的值。当我在第 1 行的文本框中输入值时，我能够将这些值获取到我的 java 代码中。但是当我在后续行的文本框中输入一些东西时，它无法传递该值。在将值传递给 java 代码之前，我将它们存储到另一个文本框中，该文本框显示在表格上方。
我认为问题可能是因为您的页面上的 ID 重复

【解决方案2】：

感谢您的帮助！我通过在用户单击单选按钮时将文本框内容写入隐藏文本字段来解决此问题，然后将此值从隐藏文本字段传递给控制器。

【讨论】：