在检查时显示输入框

Question

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

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

Answer 1

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

想想用户。首先，他们必须点击输入一个值。因此他们总是需要将手从鼠标转换为键盘。这不是很有用。

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

Answer 2

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 );
});

玩得开心。

Answer 3

由于您声明的目标是减少键入重复代码，因此该线程的真正答案是获取IDE和zen编码插件：

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

http://vimeo.com/7405114