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表单和服务器端评估来解决它：

给复选框一个有名的名称，例如＆＃34; check_blue＆＃34; +＆＃34; check_red＆＃34;
在服务器端，仅在选择了相应的复选框时处理颜色

如果您只想根据复选框状态提交或允许填写输入，则必须使用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>

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

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

3 个答案: