使输入文本字段可更改和可选择（通过复选框切换）

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

如果未选中相关复选框，您可以在提交时删除元素。

如何阻止表单发送我们不想发送一些字段

Answer 3

当您单击“提交”按钮时，所有输入值都会提交。所以你需要做的是在服务器端处理这个问题。为复选框命名并检查它们的值，谷歌搜索“处理 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>

然后，您可以检查选中了哪些复选框，并相应地查看是否应该考虑相应的文本输入字段。