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而不是id因为id。我已经用工作示例构建了 Fiddle：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' 正在从数据库中更新，因此它们现在显示为name1, id1, name2, id2.

感谢George提到 Class。

下面的例子..

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