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

【问题标题】：enable and disable using selectbox change使用选择框更改启用和禁用
【发布时间】：2013-03-05 19:18:21
【问题描述】：

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

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

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

【问题讨论】：

你在开玩笑吗@PSR，而不是 PHP 标签，它应该是脚本标签，整个函数应该是 $(document).ready 函数。
你在哪里包括你的 JQuery 文件？？？
不要对问题投反对票，只是他/她不知道语法或代码，但他/她尝试过，并且正在提问。这是提问的地方。你不觉得吗？
朋友们，我是 php 新手，我想做的是在更改选择选项时启用文本框。如果我选择“不播放”，textfeild 将禁用，如果我选择“正在播放”，则文本字段将为“out”启用，它将再次禁用
Cool Shri .. 但是您在 PHP 标记中使用 jquery 代码.. 这就是问题所在.. 我更喜欢在表格之前或之后使用脚本.. 它看起来不太好当您有一些带有一系列 html 元素的脚本时，不...糟糕的代码实践也是..您已经得到了很多答案，所以我不喜欢再次发布相同的答案.. :)

标签： php javascript jquery html drop-down-menu

【解决方案1】：

启用/禁用#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>

【讨论】：

代码可以工作，但我更喜欢在表格之前或之后使用脚本。某些 html 元素序列中的脚本看起来不太好。不好的做法..
@FaizulHasan：答案仅修复了现有代码。您的评论很棒，但在针对提出问题的人的主要问题上可能会更好。这是他们的代码:)
@FrançoisWahl：谢谢..我的错误.. :)

【解决方案2】：

将<?php 替换为<script> 并将?> 替换为</script>. 其余一切都很好。

你在php标签中写的代码是jquery代码，所以应该在script标签下。

【讨论】：

感谢 Sankalp Mishra，但我想在 php 中这样做是在 php 文件中也可以工作
是的。即使您将其保存为带有脚本标签的 .php 文件，它也可以正常工作。 :)

【解决方案3】：

在<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】：

您没有包含 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】：

试试看：

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

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

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

【讨论】：