0

私は JQuery を使用しており、各行にラジオ ボタンとテキスト ボックスを含む複数の行を一覧表示する Web ページがあります。ラジオボタンを連続してクリックすると、テキストボックスを有効にしようとしています。私が期待しているのは、その行でのみテキストボックスを有効/無効にする必要があるということです。他の行のテキスト ボックスを有効/無効にするべきではありません。

デフォルトでは、各行のすべてのテキスト ボックスは、ページの読み込み時に無効になっています。調査したところ、ラジオボタンをクリックしたときにテキストボックスを有効にする解決策を得ることができました。別のラジオ ボタンを選択すると、以前に有効にしたテキスト ボックスが再び無効になり、現在の行のテキスト ボックスが有効になるはずです。これが私が達成しようとしていることです。

私は多くの調査を行いましたが、ほとんどの回答は要件に適合しません。親切に助けてください。私はJQueryを使用しています.Jqueryとjavascriptでも解決策を得ようとしました。

コードは次のとおりです。

<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);
});
4

2 に答える 2

2

使用する.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);
});
于 2012-11-08T01:30:49.450 に答える
0

ご協力いただきありがとうございます！ユーザーがラジオボタンをクリックしたときにテキストボックスの内容を非表示のテキストフィールドに書き込み、この値を非表示のテキストフィールドからコントローラーに渡すことで、この問題を修正しました。

于 2012-11-14T22:12:26.900 に答える