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

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

javascript php html

Javascript 选中复选框时启用下拉菜单,javascript,php,html,Javascript,Php,Html,我在中有一个下拉框： <TR > <TD colspan="2" class="text1"> <div align="right"> <FONT color="#000000"> <INPUT name="services[]" type="checkbox" id="services[]" value="Employee ">

我在

中有一个下拉框：

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


查询类型/查询
一般的
雇员
学生

我该怎么做

Fiddle

首先，将您的复选框id更改为

服务

：

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

注意：

类型

是一个反向关键字，因此请将下拉列表的

名称

更改为其他内容。

首先，将您的复选框id更改为

服务

：

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

注意：

type

是一个反向关键字，因此请将下拉列表的

名称更改为其他名称。
试试这个，我想你喜欢这个
$('input[type=checkbox]').change(function()
{
    if($(this).prop('checked'))
    $('#type').show();
    else
        $('#type').hide();
});

小提琴试试这个，我想你喜欢这个
$('input[type=checkbox]').change(function()
{
    if($(this).prop('checked'))
    $('#type').show();
    else
        $('#type').hide();
});

Fiddle
无Jquery解决方案：
document.getElementById('services').onchange = function () {
  document.getElementById('type').disabled = !document.getElementById('type').disabled;
};

请注意，我将复选框id更改为“服务”，并将“禁用”添加到“选择”：
<select name = "type" id = "type" disabled>


没有Jquery解决方案：
document.getElementById('services').onchange = function () {
  document.getElementById('type').disabled = !document.getElementById('type').disabled;
};

请注意，我将复选框id更改为“服务”，并将“禁用”添加到“选择”：
<select name = "type" id = "type" disabled>


这是您的解决方案
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>


雇员
$（文档）.ready（函数（e）{
$（'input[name=“services[]”）。更改（函数（）{
如果（！$（this）.is（“：checked”））{
$（“.newRow”）.remove（）；
}否则{
$.ajax({
url:“page2.php”，
成功：功能（响应）{
$（“#我的表格”）。追加（答复）；
}
});
}
});
});

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>


查询类型/查询
一般的
雇员
学生
这是您的解决方案
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>


雇员
$（文档）.ready（函数（e）{
$（'input[name=“services[]”）。更改（函数（）{
如果（！$（this）.is（“：checked”））{
$（“.newRow”）.remove（）；
}否则{
$.ajax({
url:“page2.php”，
成功：功能（响应）{
$（“#我的表格”）。追加（答复）；
}
});
}
});
});

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>


查询类型/查询
一般的
雇员
学生
您可以根据以下代码更改脚本
function check() {

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

}
}

演示：
您可以根据下面的代码更改脚本
function check() {

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

}
}

对于演示：
您可以在第一个下拉框的onchange上使用jquery调用ajax页面。您可以在第一个下拉框的onchange上使用jquery调用ajax页面。我必须保留services[]，因为有许多复选框值，每个文本框的id都作为数组“services[]”给出那么，我如何修改您提供的javascript以满足我的代码需求呢？我的意思是-是的，有许多复选框，但我希望只有在选中此特定复选框时才能启用下拉列表。我必须保留服务[]，因为有许多复选框值，每个文本框的id都作为数组“services[]”给出那么，我如何修改您提供的javascript以满足我的代码需求呢？我的意思是-是的，有许多复选框，但我希望只有选中此特定复选框时才能启用下拉列表这很好，但我有许多复选框。这就是为什么我为每个文本框指定id为“services[]”。如何使用您的代码来满足我的编码需求？你给出的解决方案很好，但我想知道如何修改我的代码如果有多个复选框，每个复选框，它将调用函数。@ProgrammingStudent:我的意思是-是的，有许多复选框，但我希望只有选中此特定复选框时才能启用下拉列表等等，我建议您如何仅为一个复选框启用下拉列表？@user2822187:首先从复选框id中删除括号，它只用于正则表达式。这很好，但我有很多复选框。这就是为什么我为每个文本框指定id为“services[]”。如何使用您的代码来满足我的编码需求？你给出的解决方案很好，但我想知道如何修改我的代码如果有多个复选框，每个复选框，它将调用函数。@ProgrammingStudent:我的意思是-是的，有许多复选框，但我希望只有选中此特定复选框时才能启用下拉列表等等，我建议您如何仅为一个复选框启用下拉列表？@user2822187:首先从复选框id中删除括号，它只用于正则表达式。我有许多id=services[]的复选框。仅当选中一个特定复选框时，下拉列表才应启用。您不应为页面上超过1个元素使用相同的id。是的，我知道，但假设我使用服务[]，它是否像数组一样工作？我实际上是在修改前一个人写的代码。我只需要修改它来启用下拉菜单你是说？你知道它不是数组而是字符串吗？如果是这样：只需使用一些其他字符串，如id='services-1'，id='services-2'。（括号不好）。我有很多id=services[]的复选框。仅当选中一个特定复选框时，下拉列表才应启用。您不应为页面上超过1个元素使用相同的id。是的，我知道，但假设我使用服务[]，它是否像数组一样工作？我实际上是在修改前一个人写的代码。我只需要修改它来启用下拉菜单你是说？你知道它不是数组而是字符串吗？如果是这样：只需使用一些其他字符串，如id='services-1'，id='services-2'。（那里的支架不好）。