堆栈内存溢出
  繁体   English   中英

使用选择框更改启用和禁用

[英]enable and disable using selectbox change

 原文  2013-03-05 10:20:56  3   6    php/ javascript/ jquery/ html/ drop-down-menu

问题描述

我不知道如何使用选择框选项启用和禁用文本字段。

也许我在下面的代码中写了这完全错误的代码。 如果我这样做了，请告诉我正确的代码。 

<body>
<table width="500" border="1">
  <form style="text-align:center" id="form1" name="form1" method="post" action="">
    <tr>
      <th width="32" nowrap="nowrap">Status</th>
      <th width="32" nowrap="nowrap">Runs</th>
      <th width="16" nowrap="nowrap">6</th>
    </tr>
<?php
$('#Status1').change(function(){
var theVal = $('#Status1').val();
switch(theVal){
    case'0':
        $('#Runs1').prop('disabled', true);
        break;
    case'1':
        $('#Runs1').prop('disabled', false);
        break;
    case'2':
        $('#Runs1').prop('disabled', true);
        break;
    }
});
?>
<tr>
 <td align='center'>
   <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
 <td align='center'>
   <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
 </td>
</tr>
</form>
</table>
</body>

6 个解决方案

解决方案1
 2 已采纳  2013-03-05 10:30:35

用于启用/禁用＃Run1输入框的代码嵌套在PHP标记之间（服务器端），但是此代码是用javascipt（客户端）编写的。 

<body>
<table width="500" border="1">
  <form style="text-align:center" id="form1" name="form1" method="post" action="">
    <tr>
      <th width="32" nowrap="nowrap">Status</th>
      <th width="32" nowrap="nowrap">Runs</th>
      <th width="16" nowrap="nowrap">6</th>
    </tr>
<script type="text/javascript">
$('#Status1').change(function(){
var theVal = $('#Status1').val();
switch(theVal){
    case'0':
        $('#Runs1').prop('disabled', true);
        break;
    case'1':
        $('#Runs1').prop('disabled', false);
        break;
    case'2':
        $('#Runs1').prop('disabled', true);
        break;
    }
});
</script>
<tr>
 <td align='center'>
   <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
 <td align='center'>
   <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
 </td>
</tr>
</form>
</table>

解决方案2
 1  2013-03-05 10:28:12

将<?php替换为<script> ，将?>替换为</script>. 休息，一切都很好。

您在php标记中编写的代码是一个Jquery代码，因此应在脚本标记下。

解决方案3
 1  2013-03-05 10:32:20

在<head>加载jquery并在其中添加javascript ..不在<?php （php代码）内 

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$('#Status1').change(function(){
  var theVal = $('#Status1').val();
  switch(theVal){
  case'0':
    $('#Runs1').prop('disabled', true);
    break;
  case'1':
    $('#Runs1').prop('disabled', false);
    break;
  case'2':
    $('#Runs1').prop('disabled', true);
    break;
 }
});
</script>
<body>
....//rest of your code

解决方案4
 1  2013-03-05 10:33:43

您尚未包括jquery文件和使用标签，而不是javascript代码 

<body>
<table width="500" border="1">
<form style="text-align:center" id="form1" name="form1" method="post" action="">
<tr>
  <th width="32" nowrap="nowrap">Status</th>
  <th width="32" nowrap="nowrap">Runs</th>
  <th width="16" nowrap="nowrap">6</th>
</tr>
<script src="../jquery.js"></script>
<script type="text/javascript">
$('#Status1').change(function(){
var theVal = $('#Status1').val();
switch(theVal){
 case'0':
    $('#Runs1').prop('disabled', true);
    break;
 case'1':
    $('#Runs1').prop('disabled', false);
    break;
case'2':
    $('#Runs1').prop('disabled', true);
    break;
   }
});
</script>
<tr>
 <td align='center'>
 <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
<td align='center'>
  <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
</td>
</tr>
</form>
</table>
</body>

解决方案5
 1  2013-03-05 10:46:21

像这样尝试：

的HTML 

<body>
    <table width="500" border="1">
      <form style="text-align:center" id="form1" name="form1" method="post" action="">
        <tr>
            <th width="32" nowrap="nowrap">Status</th>
            <th width="32" nowrap="nowrap">Runs</th>
            <th width="16" nowrap="nowrap">6</th>
        </tr>

        <tr>
            <td align='center'>
            <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
            <td align='center'>
            <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
            </td>
        </tr>
    </form>
    </table>
</body>

脚本 

<script type="text/javascript">
$(document).ready(function(){
    $('#Status1').change(function(){
        var theVal = $('#Status1').val();
        switch(theVal){
            case'0':
                $('#Runs1').prop('disabled', true);
                break;
            case'1':
                $('#Runs1').prop('disabled', false);
                break;
            case'2':
                $('#Runs1').prop('disabled', true);
                break;
        }
    });
});
</script>

但是首先检查您是否在head section添加了一个jquery library file 。

解决方案6
 0  2013-03-05 11:18:21

朋友们，这是我的问题的解决方案，谢谢大家的帮助。 

<html>
<head>
<script type="text/javascript" src="../jquery.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function(){
    $('#Status1').change(function(){
        var theVal = $('#Status1').val();
        switch(theVal){
            case'0':
                $('#Runs1').prop('disabled', true);
                break;
            case'1':
                $('#Runs1').prop('disabled', false);
                break;
            case'2':
                $('#Runs1').prop('disabled', true);
                break;
        }
    });
});
</script>
</head>
<body>
    <table width="500" border="1">
      <form style="text-align:center" id="form1" name="form1" method="post" action="">
        <tr>
            <th width="32" nowrap="nowrap">Status</th>
            <th width="32" nowrap="nowrap">Runs</th>
            <th width="16" nowrap="nowrap">6</th>
        </tr>
        <tr>
            <td align='center'>
            <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
            <td align='center'>
            <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
            </td>
        </tr>
    </form>
    </table>
</body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用jQuery更改选择框中的默认文本 在选择框上更改Ajax中的状态 选择另一个后启用selectBox 使用表格内的复选框启用/禁用文本框 使用JavaScript动态启用和禁用CSS文件？ 使用JavaScript启用/禁用按钮的问题 使用JQuery启用和禁用下拉列表的问题 是否可以在更改单选按钮时禁用/启用jquery功能 使用PHP预先填充选择框 如何使用PHP JSON ARRAY根据另一个选择框填充选择框
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM