Question

我在<table>：

中有一个下拉框

<TR > 
    <TD colspan="2" class="text1">
        <div align="right">
            <FONT color="#000000"> 
                <INPUT name="services[]" type="checkbox" id="services[]" value="Employee ">
            </FONT>
        </div>
    </TD>

    <TD width="321" align="center" valign="top" class="text1">
        <DIV align="left">Employee</DIV>
    </TD>
</TR>

当用户选中上述复选框时，我希望启用以下下拉菜单：

<TR> 
    <TD width="155" height="25" align="right" class="text1">
        <div align="right">Enquiry Type/For</div>
    </TD>

    <TD align="left" colspan="2" height="25">&nbsp;
        <select name = "type" id = "type">
            <!--<option value = "general">General</option>-->
            <option value = "general">General</option>
            <option value = "employee">employee</option>
            <option value = "student">student</option>
        </select>
    </TD>
</TR>

我该怎么做？

小提琴Here

Answer 1

首先，将您的复选框ID更改为services：

<INPUT name="services[]" type="checkbox" id="services" value="Employee " rel="services">

然后更改下拉菜单：

<select name = "type" id = "type" disabled="disabled">

现在，使用jQuery：

$(function(){
 $("[rel=services]").click(function(){
  $("#type").attr("disabled", false);
 });
});

注意：type是一个反向关键字，因此请将下拉列表中的name更改为其他内容。

Answer 2

您可以根据以下代码更改脚本.....

function check() {

if (($("#check:checked").length) > 0) {
    $("#type").removeAttr("disabled");
} else {
    $("#type").attr("disabled", "disabled");

}
}

for demo：JSFIDDLE

Answer 3

试试这个，我想你喜欢这个

$('input[type=checkbox]').change(function()
{
    if($(this).prop('checked'))
    $('#type').show();
    else
        $('#type').hide();
});

小提琴Here

Answer 4

没有Jquery解决方案：

document.getElementById('services').onchange = function () {
  document.getElementById('type').disabled = !document.getElementById('type').disabled;
};

注意我已将复选框ID更改为“services”，并将“禁用”添加到“选择”：

<select name = "type" id = "type" disabled>

Answer 5

这是您的解决方案

page1.php中

<table id='mytable'>
<TR > 
    <TD colspan="2" class="text1">
        <div align="right">
            <FONT color="#000000"> 
                <INPUT name="services[]" type="checkbox" id="services[]" value="Employee ">
            </FONT>
        </div>
    </TD>

    <TD width="321" align="center" valign="top" class="text1">
        <DIV align="left">Employee</DIV>
    </TD>
</TR>
</table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
    $('input[name="services[]"]').change(function(){
        if(!$(this).is(":checked")) {
            $(".newRow").remove();
        } else {
            $.ajax({
                url:"page2.php",
                success: function(response) {
                    $("#mytable").append(response);
                }
            });
        }
    });
});
</script>

使page2.php

<TR class="newRow"> 
    <TD width="155" height="25" align="right" class="text1">
        <div align="right">Enquiry Type/For</div>
    </TD>

    <TD align="left" colspan="2" height="25">&nbsp;
        <select name = "type" id = "type">
            <!--<option value = "general">General</option>-->
            <option value = "general">General</option>
            <option value = "employee">employee</option>
            <option value = "student">student</option>
        </select>
    </TD>
</TR>

选中复选框时启用下拉菜单

5 个答案: