【问题标题】:Change generated text box visibility or enabled state based on accompanying checkbox in php根据 php 中的复选框更改生成的文本框可见性或启用状态
【发布时间】:2016-01-19 16:20:36
【问题描述】:

我目前正在使用 php 显示一列带编号的复选框,一个用于给定月份的每一天,在每个复选框旁边我显示一个文本框以输入给定选中日期的可选注释。我希望通过基于相邻复选框状态显示/隐藏文本框或切换其禁用属性来限制用户仅在检查的天数内输入注释。我使用 php 循环来显示每天的表单元素,复选框被命名为 box[],文本框被命名为 cmets[]。我知道我可以在将记录插入数据库之前丢弃未使用的输入,但我不想让用户留下这样的印象,即他们可以放置将在未选择的日子保留的注释。

 while ($day_count <= $num_days){


 echo"<input name='boxes[]' type='checkbox' value='".$prov_id."_".$day_count."' />".$day_count."</input>";

   echo "Comment: <input name='comments[]' type='text' size='15' maxlength='255' />";
   echo "<br>";

$day_count++;   

}

【问题讨论】:

  • 具体有什么问题或疑问?
  • 到目前为止,我的最佳尝试没有产生在未选中随附复选框时禁用的文本框。以下是最后尝试的方法:
  • while ($day_count &lt;= $num_days){ // echo "&lt;input type='checkbox' name='boxes[]' id='boxes[]' value='.$day_count.'&gt;&lt;/input&gt; "; echo" &lt;input type='checkbox' name='boxes[]' id='boxes[]' value='.$day_count.'&gt;&lt;/input&gt; &lt;input type='text' id='txt1' name='comments[]'&gt; &lt;script type='javascript'&gt; $('#boxes[]').change(function(){ if($(this).is(':checked')) $(this).next(':text').attr('disabled','true'); else $(this).next(':text').removeAttr('disabled'); }); &lt;/script&gt;"; echo "&lt;br&gt;"; $day_count++; }

标签: javascript php jquery css checkbox


【解决方案1】:

您可以在 Javascript 中通过添加一个在您的复选框被选中时触发的函数来执行此操作。看看这个 Stack Overflow 答案,了解如何做到这一点的示例:Javascript checkbox onChange

在那里,您可以为此更改评论框的显示值,但我建议将这些评论框包装在 div 中并显示/隐藏整个 div。

由于 PHP 是服务器端,当用户检查和取消检查 PHP 中的内容时,您将无法在页面上进行任何更改,只有 Javascript

要指定特定名称,您可以使用任何谨慎的值,在您的情况下:$prov_id,伪代码如下:

<div id='$prov_id'>Input text code here</div>

然后在复选框的 onchange 方法中,传入该 ID。

最后,对于 javascript,只需选择将 id 传递给参数的 div。 $('#id')

【讨论】:

  • 我查看了多个示例并尝试将它们应用到我的代码中,但我遇到了障碍,因为我正在尝试处理名为 cmets[] 之类的元素。
  • 有没有办法像评论框一样引用以 [] 命名的 div?或者以其他方式分隔我将在页面上拥有的 90 个文本框 div 中的哪些是隐藏的,哪些是显示的?我发现的示例与单个或非生成元素有关,而不是通过循环填充的元素,因此尚不清楚如何将显示/隐藏功能限制在所需的确切 div 中。
  • 更新了上面的编辑,希望这足够清楚,可以让你走上这条路,但如果不是,请告诉我
猜你喜欢
  • 2011-05-22
  • 1970-01-01
  • 2013-05-08
  • 2013-06-30
  • 1970-01-01
  • 1970-01-01
  • 2023-01-31
  • 2019-09-26
  • 2023-03-18
相关资源
最近更新 更多