在支票上显示输入框

问题描述：

您可以在纸质表格中看到需要转换为网页表单的内容。我希望它显示复选框并禁用输入字段，除非用户选中它旁边的框。我已经看到了使用一个或两个元素来完成此操作的方法，但我想用大约20-30个检查/输入对来完成此操作，并且不希望多次重复相同的代码。我只是没有足够的经验来自己解决这个问题。任何人都知道解释如何做到这一点？谢谢！在支票上显示输入框

P.S.最终，这些数据将全部通过电子邮件发送给PHP。

enter image description here

由于这ISN动态，为什么要使用JavaScript或jQuery？只需使用IDE构建表单即可。 – j08691 2012-03-08 19:58:18

答

在HTML

：

//this will be the structure of each checkbox and input element. 
<input type="checkbox" value="Public Relations" name="skills" /><input type="text" class="hidden"/> Public Relations <br/>

在你的CSS：

.hidden{ 
    display:none; 
} 
.shown{ 
    display:block; 
}

在你的jQuery：

$('input[type=checkbox]').on('click', function() { 
    // our variable is defined as, "this.checked" - our value to test, first param "shown" returns if true, second param "hidden" returns if false 
    var inputDisplay = this.checked ? 'shown' : 'hidden'; 
    //from here, we just need to find our next input in the DOM. 
    // it will always be the next element based on our HTML structure 
    //change the 'display' by using our inputDisplay variable as defined above 
    $(this).next('input').attr('class', inputDisplay); 
});

有乐趣。

太棒了，谢谢!! ......几个错误：在'attr'之前缺少'''，在'inputDisplay'之后也不需要'} ...所以这行应该是'$（this）.next（'input' ）.attr（'class'，inputDisplay）;'...我没有编辑权限:)管理员注意：它说我的编辑时间不够长，但所有需要更改的是添加一个' .'并删除'}'...不能帮助它需要的变化是如此之小...谢谢！ – ansarob 2012-03-09 15:24:46

为反映您确定的问题所做的修改 - 致歉。另外，如果您不想遇到编辑问题，请确保您编辑了BODY并包含诸如** EDIT 1 **之类的内容，并且添加了缺少的\。\以及删除了错误的\} \ - 我想避开我的编辑。 – Ohgodwhy 2012-03-09 21:47:45

答

我不认为这是一个好主意。

想想用户。首先他们必须点击才能输入一个值。所以他们总是需要将他们的手从鼠标变成键盘。这不是很实用。

为什么不只是给文本字段？用电子邮件发送时，您可以忽略空值。

这很有道理。纸质表格有缺陷 - 为什么要选中一个框来填写数字？填写的数字表示支票，空白值表示不支票。完成。如果您需要*将检查值存储在数据库中或某些内容中，请在后端处理它。不要让我检查一个盒子，这样我可以输入一个数字。 – 2012-03-08 20:05:22

你知道，这是有道理的。我想我刚刚挂上了转换纸张到底是怎么回事。有时你只是在想事:) – ansarob 2012-03-08 20:07:05

更好的是单选按钮。 – 2012-03-08 20:40:26

答

由于您的既定目标是减少输入重复的代码，真正的答案，这个线程，就是以一个IDE和禅宗编码插件：

http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/

http://vimeo.com/7405114

在支票上显示输入框

相关推荐