使輸入文本字段可更改和可選（切換複選框）

Question

請參閱我的當前html代碼段如下。我正在嘗試使html輸入字段可更改和可選。因此，我可以更改輸入文本字段中與相應複選框切換的顏色值。點擊提交按鈕時，只會提交所選顏色的信息。 我的當前html正確顯示內容，但它會提交兩種顏色信息。儘管只有一個複選框被選中。

<form id="myForm">   
    <input type="checkbox" name="color1" value="blue_check" /> 
    Color1: <input type="text" name="blue" value="120" /></br> 
    <input type="checkbox" name="color2" value="red_check" /> 
    Color2: <input type="text" name="red" value="160" /></br> 
    <input type="submit" value="OK" />  
</form> 

或點擊：http://jsfiddle.net/4xDFK/56/

預先感謝您。

Answer 1

使用jQuery：

$(document).ready(function() { 
    $('#myForm :checkbox').each(function() { 
     $(this).next("input").attr('disabled',!$(this).is(':checked')); 
    }); 
}); 

$('#myForm :checkbox').change(function() { 
    $(this).next("input").attr('disabled',!$(this).is(':checked')); 
}); 

---

當你不提使用JavaScript或者JS框架，這裏是用純HTML表單和服務器端的評估，以解決這個問題的建議：

1. 給複選框一個生動的名字，如「check_blue」 +「check_red」
2. 在服務器端，只處理顏色，如果相應的複選框有已被選中

如果您只想提交或允許根據複選框狀態填寫輸入，您必須使用JavaScript（並且應該已經在您的問題中提及或至少作爲標記）。

Answer 2

所有輸入值都是在您點擊提交按鈕時提交的。所以你需要做的是在服務器端處理這個問題。爲複選框命名並檢查它們的值，google用於「處理XXXX中的複選框」，其中XXXX是您的服務器端語言。

<h1> Colors Information </h1> 
<form id="myForm"> 
    <input type="checkbox" name="choice1" value="choice1"/> 
    Color1: <input type="text" name="blue" value="120" /></br> 
    <input type="checkbox" name="choice2" value="choice2"/> 
    Color2: <input type="text" name="red" value="160" /></br>  
    <input type="submit" value="OK" /> 
</form> 

然後，您可以檢查選中了哪些複選框，並據此查看是否應考慮相應的文本輸入字段。

Answer 3

如果未選中相關複選框，則可以在提交時刪除元素。

how to prevent form from sending some fields we don't want to send