Question

我想让用户选择一个“行”来提交报告类型的请求。如何将单选按钮放在表格的第一列中，选择哪一个是通过提交按钮发送到下一页的活动行？

<form action = "issuereporting.php" method="post">
    <h2>Please select your search criteria</h2>
    <table>
        <tr>
            <td><input type ="radio" name ="report" value ="select1" /></td>
            <td>Single Date:</td>
            <td><script>DateInput('orderdate', true, 'DD-MON-YYYY')</script></td>
        </tr>
        <tr>
            <td><input type="radio" name="report" value="select2" /></td>
            <td>Date Range:</td>
            <td>Start Date</td>
            <td>End Date</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><script>DateInput('begdate', true, 'DD-MON-YYYY')</script></td>
            <td><script>DateInput('enddate', true, 'DD-MON-YYYY')</script></td>
        </tr>
        <tr>
            <td><input type="radio" name="report" value="select3" /></td>
            <td>Application:</td>
            <td><select name = "application">
                    <option value = "default">default</option>
                    <option value = "2">2</option>
                    </select></td>
        </tr>
        <tr>
            <td><input type="radio" name="report" value="select4" /></td>
            <td>Application and Date:</td>
            <td><select name = "application">
                    <option value = "default">default</option>
                    <option value = "2">2</option>
                    </select></td>
        </tr>
        <tr>
            <td><input type = "submit" value = "Submit"></td>
        </tr>
    </table>
</form>

我尝试使用上一个问题中的这个js文件，但我无法让它正常工作。我知道它需要扩展，但我无法让日期字段变灰。谢谢你的帮助！

$("input[name=report]").click(function() {
    $(this).closest('table').find("input[name=orderdate]").attr("disabled", "disabled");
    $(this).closest('tr').find('input[name=textfield]').removeAttr('disabled');
});

Answer 1

使用此：

$("input[name=report]").click(function() {
    $(this).closest('table').find("input[type=text],select").prop("disabled", true);
    $(this).closest('tr').find('input[type=text],select').prop("disabled", false);
});

在JsFiddle

上查看此实例

Answer 2

一种方法是为行选择单选按钮设置onclick处理程序，并在该处理程序中找到TR，它是按钮TD的父级。那是你选择的行。

灰显HTML表单元素

2 个答案: