首页 文章

当使用jquery在同一行中选择另一个选择框时,如何在另一个选择框中禁用

提问于
浏览
1

我想在同一行中选择另一个选择框(选项值= 3)时在另一个选择框中禁用 .

表中有很多行 . 在每一行中,每列中有三个选择框 . 如果我在第一列中选择了选择框并且所选框的选项值为3,我想禁用同一行中的第二个选择框 .

我把代码写成如下 .

单击“添加行”按钮后,在表中添加新行时,我的代码无法正常工作 . 我需要一些指导方针 .

javascript:

<!-- add new row -->
<script>
    $(document).ready(function() {
        var id = 0;

        // Add button functionality
        $("#addrow").click(function() {
            id++;

            /*var master = $(this).parents("table.fancyTable");*/
            var master = $(this).parents("table.stdform");

            // Get a new row based on the prototype row
            var prot = master.find(".prototype").clone();

            prot.attr("class", "");
            /*prot.find(".id").attr("value", id);*/

            master.find(".fancyTable tbody").append(prot);

            $(".fancyTable tbody tr:nth-child(odd)").addClass("odd");
            $(".fancyTable tbody tr:nth-child(even)").addClass("even");
        });

    });
</script>
<!-- change select box -->
<script>
$(document).ready(function() {
    $('.processing_code').bind('change', function(){
    var data = $(this).val();
    alert(data);
    if(data == 3){
        $(this).parent('td').siblings().find(".parameter1").attr("disabled", "true");
    }
});
});
</script>

css:

<style>
 .fancyTable .prototype {
    display:none;
}
.odd{
 background-color: #ddd;
}
.even{
 background-color: #eee;
}
</style>

jsp:

<input type="button"
    name="btn_JobTempReg_addrow" class="mediumbutton"
    value="Add Row" id="addrow" />    
<div class="container_12 ">
        <div class="grid_job_mod height400">
            <table class="fancyTable" id="sortable-table"
                cellpadding="0" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>header one</th>
                        <th>header two</th>
                        <th>header three</th>
                    </tr>
                </thead>
                <tbody id="job-tbody">
                        <tr class="prototype">
                            <td>
                                <s:select list="#{'1':'One','2':'Two','3':'Three' }" value="1" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
                            </td>
                            <td>
                                <s:select name="parameter1" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter1" style="width: 140px" id="parameter1" cssClass="parameter1"/>
                            </td>
                            <td>
                                <s:select name="parameter2" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter2" style="width: 140px" id="parameter2" cssClass="parameter2"/>
                            </td>
                        </tr>

                        <s:iterator value="p_jobTmpEnt" var="temEnt" status="status">
                            <tr>
                                <td>
                                    <s:if test="#temEnt.processing_code == 1">
                                        <s:select list="#{'1':'One','2':'Two','3':'Three' }" value="1" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
                                    </s:if>
                                    <s:if test="#temEnt.processing_code == 2">
                                        <s:select list="#{'1':'One','2':'Two','3':'Three' }" value="2" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
                                    </s:if>
                                    <s:if test="#temEnt.processing_code == 3">
                                        <s:select list="#{'1':'One','2':'Two','3':'Three' }" value="3" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
                                    </s:if>
                                </td>
                                <td>
                                    <s:select name="parameter1" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter1" style="width: 140px" id="parameter1" cssClass="parameter1"/>
                                </td>
                                <td>
                                    <s:select name="parameter2" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter2" style="width: 140px" id="parameter2" cssClass="parameter2"/>
                                </td>
                            </tr>
                        </s:iterator>
                </tbody>
            </table>
        </div>
    </div>

提前致谢 .

2 回答

  • 0
    $('.processing_code').change(function() {
       if($(this).val() ==3)
          $(this).next('select').attr("disabled", "true");
       else
          $(this).next('select').attr("disabled", "false");
    });
    
  • 0

    试试这个..

    <script>
    $(document).ready(function() {
         $('.processing_code').bind('change', function(){
        var data = $(this).val();
        if(data == 3){
            $(this).parent('td').siblings()
                   .find(".parameter1")
                   .attr("disabled", "disabled");
        }
    });
    });
    </script>
    

相关问题