在支票上顯示輸入框

您可以在紙質表格中看到需要轉換爲網頁表單的內容。我希望它顯示覆選框並禁用輸入字段，除非用戶選中它旁邊的框。我已經看到了使用一個或兩個元素來完成此操作的方法，但我想用大約20-30個檢查/輸入對來完成此操作，並且不希望多次重複相同的代碼。我只是沒有足夠的經驗來自己解決這個問題。任何人都知道解釋如何做到這一點？謝謝！在支票上顯示輸入框

P.S.最終，這些數據將全部通過電子郵件發送給PHP。

enter image description here

來源

2012-03-08 ansarob

由於這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); 
});

有樂趣。

來源

2012-03-08 20:14:09 Ohgodwhy

太棒了，謝謝!! ......幾個錯誤：在'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:00:45 HerrSerker

這很有道理。紙質表格有缺陷 - 爲什麼要選中一個框來填寫數字？填寫的數字表示支票，空白值表示不支票。完成。如果您需要*將檢查值存儲在數據庫中或某些內容中，請在後端處理它。不要讓我檢查一個盒子，這樣我可以輸入一個數字。 – 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

來源

2012-03-08 21:23:57

在支票上顯示輸入框

回答

相關問題