0

データベースから取り込まれるフォームを作成しました。

結果は画面に表示され、デフォルトでは、各行の最初のドロップダウン リストを除くすべてのフォーム フィールドを無効にします。

ドロップダウン リストの値を変更すると、その特定の行のフォーム フィールドが有効または無効になります。これは最初の行でのみ機能しますが、後続の行では機能しません。

これは、最初の行のみを参照しているためだと思いますが、これを変更する方法を確認しています..

これは私がこれまでに得たものです.これは2行だけであることを念頭に置いてください.ライブデータは多くの行を提示する可能性があります.

<html>
<head>
    <title>test</title>
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#option').change(function(){
          if($(this).val()=="2"){
            $("#name").removeAttr("disabled");
            $("#id").removeAttr("disabled");
            $("#home").removeAttr("disabled");
            $("#active").removeAttr("disabled");
          }

          if($(this).val()!="2"){
            $("#name").attr("disabled", "disabled");
            $("#id").attr("disabled", "disabled");
            $("#home").attr("disabled", "disabled");
            $("#active").attr("disabled", "disabled");
          }
        });
      });
    </script>
</head>
<body>
    <form id='usr' method='post' action='test.php'>
        <table border='1' width='60%'>
            <tr>
                <th>Val1</th>
                <th>Val2</th>
                <th>Val3</th>
                <th>Val4</th>
                <th>Val5</th>
                <th>Val6</th>
            </tr>
            <tr align='center'>
                <td>
                    <select name='option' id='option' />
                        <option></option>
                        <option value='1'>Option1</option>
                        <option value='2'>Option2</option>
                    </select>
                </td>
                <td>USR1</td>
                <td><input type='text' name='name[]' id='name' value='' disabled='disabled'/></td>
                <td><input type='text' name='id[]' id='id' value='' disabled='disabled'/></td>
                <td>
                    <select name='home[]' id='home' disabled='disabled'/>
                        <option value='North'>North</option>
                        <option value='South'>South</option>
                        <option value='Other'>Other</option>
                    </select>
                </td>
                <td>
                    <select name='active[]' id='active' disabled='disabled'/>
                        <option value=''></option>
                        <option value='1'>Yes</option>
                        <option value='2'>No</option>
                        <option value='3'>Dead</option>
                        <option value='4'>Other</option>
                    </select>
                </td>
            </tr>
            <tr align='center'>
                <td>
                    <select name='option' id='option' />
                        <option></option>
                        <option value='1'>Option1</option>
                        <option value='2'>Option2</option>
                    </select>
                </td>
                <td>USR2</td>
                <td><input type='text' name='name[]' id='name' value='' disabled='disabled'/></td>
                <td><input type='text' name='id[]' id='id' value='' disabled='disabled'/></td>
                <td>
                    <select name='home[]' id='home' disabled='disabled'/>
                        <option value='North'>North</option>
                        <option value='South'>South</option>
                        <option value='Other'>Other</option>
                    </select>
                </td>
                <td>
                    <select name='active[]' id='active' disabled='disabled'/>
                        <option value=''></option>
                        <option value='1' >Yes</option>
                        <option value='2' >No</option>
                        <option value='3' >Dead</option>
                        <option value='4'>Other</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

これをすべての行で機能させるのを手伝ってくれる人がいますか。行の先頭でドロップダウンを選択すると、その行のみに影響するはずです。

4

2 に答える 2

1

classではなく、まずあなたの方が良いでしょidid。実際の例でフィドルを構築しました:http://jsfiddle.net/9EfvS/

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

12 adn 314 は条件付きであり、エントリの一意の ID を意味します (行数 1、2、3 などの代わりに使用することをお勧めします)。これは、サーバーに投稿した後、データベース エントリと比較する方が簡単だからです。

$(document).ready(function () {
    $('.blah').change(function () {

    var parentTR = $(this).parents('tr');
    if ($(this).val() == "2") {
        $(parentTR).find(".name").removeAttr("disabled");
        $(parentTR).find(".id").removeAttr("disabled");
        $(parentTR).find(".home").removeAttr("disabled");
        $(parentTR).find(".active").removeAttr("disabled");
    }

    if ($(this).val() != "2") {
        $(parentTR).find(".name").attr("disabled", "disabled");
        $(parentTR).find(".id").attr("disabled", "disabled");
        $(parentTR).find(".home").attr("disabled", "disabled");
        $(parentTR).find(".active").attr("disabled", "disabled");
    }

    });
});


<form id='usr' method='post' action='test.php'>
<table border='1' width='60%'>
    <tr>
        <th>Val1</th>
        <th>Val2</th>
        <th>Val3</th>
        <th>Val4</th>
        <th>Val5</th>
        <th>Val6</th>
    </tr>
    <tr align='center'>
        <td>
            <select name='option[12]' id='option12' class='blah' />
            <option></option>
            <option value='1'>Option1</option>
            <option value='2'>Option2</option>
            </select>
        </td>
        <td>USR1</td>
        <td>
            <input type='text' name='name[12]' class='name' value='' disabled='disabled' />
        </td>
        <td>
            <input type='text' name='id[12]' class='id' value='' disabled='disabled' />
        </td>
        <td>
            <select name='home[12]' class='home' disabled='disabled' />
            <option value='North'>North</option>
            <option value='South'>South</option>
            <option value='Other'>Other</option>
            </select>
        </td>
        <td>
            <select name='active[12]' class='active' disabled='disabled' />
            <option value=''></option>
            <option value='1'>Yes</option>
            <option value='2'>No</option>
            <option value='3'>Dead</option>
            <option value='4'>Other</option>
            </select>
        </td>
    </tr>
    <tr align='center'>
        <td>
            <select name='option[314]' id='option314' class='blah' />
            <option></option>
            <option value='1'>Option1</option>
            <option value='2'>Option2</option>
            </select>
        </td>
        <td>USR1</td>
        <td>
            <input type='text' name='name[314]' class='name' value='' disabled='disabled' />
        </td>
        <td>
            <input type='text' name='id[314]' class='id' value='' disabled='disabled' />
        </td>
        <td>
            <select name='home[314]' class='home' disabled='disabled' />
            <option value='North'>North</option>
            <option value='South'>South</option>
            <option value='Other'>Other</option>
            </select>
        </td>
        <td>
            <select name='active[314]' class='active' disabled='disabled' />
            <option value=''></option>
            <option value='1'>Yes</option>
            <option value='2'>No</option>
            <option value='3'>Dead</option>
            <option value='4'>Other</option>
            </select>
        </td>
    </tr>        
</form>
于 2013-10-16T12:39:14.207 に答える
0

並べ替えました。

クラスで変更を使用して行 ID を取得し、それを ID ルックアップの前に付けて、無効化を追加または削除します。

各 id='name'、id='id' は DB から更新されるため、次のように表示されます。name1, id1, name2, id2.

クラスについて言及してくれたジョージに感謝します。

以下の例..

<html>
<head>
<title>test</title>
<script src="jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.option').change(function(){
    var id = $(this).closest('td').parent()[0].sectionRowIndex;

    if($(this).val()=="2"){
     $("#name"+id).removeAttr("disabled");
     $("#id"+id).removeAttr("disabled");
     $("#home"+id).removeAttr("disabled");
     $("#active"+id).removeAttr("disabled");
    }

    if($(this).val()!="2"){
    $("#name"+id).attr("disabled", "disabled");
    $("#id"+id).attr("disabled", "disabled");
    $("#home"+id).attr("disabled", "disabled");
    $("#active"+id).attr("disabled", "disabled");
    }
    });
});
</script>
</head>
<body>

<form id='usr' method='post' action='test.php' ><table border='1' width='60%'><tr><th>Val1</th><th>Val2</th><th>Val3</th><th>Val4</th><th>Val5</th><th>Val6</th></tr>

<tr align='center'>
<td><select name='option' class='option' /><option></option><option value='1'>Option1</option><option value='2'>Option2</option></select></td>
<td>USR1</td>
<td><input type='text' name='name[]' id='name1' value='' disabled='disabled'/></td>
<td><input type='text' name='id[]' id='id1' value='' disabled='disabled'/></td>
<td><select name='home[]' id='home1' disabled='disabled'/><option value='North'>North</option><option value='South'>South</option><option value='Other'>Other</option></select></td>
<td><select name='active[]' id='active1' disabled='disabled'/><option value=''></option><option value='1' >Yes</option><option value='2' >No</option><option value='3' >Dead</option><option value='4'>Other</option></select></td>
</tr>

<tr align='center'>
<td><select name='option' class='option' /><option></option><option value='1'>Option1</option><option value='2'>Option2</option></select></td>
<td>USR2</td>
<td><input type='text' name='name[]' id='name2' value='' disabled='disabled'/></td>
<td><input type='text' name='id[]' id='id2' value='' disabled='disabled'/></td>
<td><select name='home[]' id='home2' disabled='disabled'/><option value='North'>North</option><option value='South'>South</option><option value='Other'>Other</option></select></td>
<td><select name='active[]' id='active2' disabled='disabled'/><option value=''></option><option value='1' >Yes</option><option value='2' >No</option><option value='3' >Dead</option><option value='4'>Other</option></select></td>
</tr>

</form></body>
</html>
于 2013-10-16T13:17:09.450 に答える