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

Question

请看我当前的 html sn-p 如下。我正在尝试使 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

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

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

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>

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