javascript - 使输入文本字段可变和可选择(用复选框切换)

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(并且可能应该在您的问题中或至少作为标签提及)。