Question

Please see my current html snippet is as below. I am trying to make html input fields changeable and selectable. So I can change the value of colors in input text field which is toggled with the corresponding checkbox. When the submit button is clicked, only the information of the selected color is submitted.
My current html displays the content correctly, but it will submit two colors information. Despite of only one checkbox is selected.

<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>

or click on: http://jsfiddle.net/4xDFK/56/

Thank you in advance.

Answer 1

With 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'));
});

---

As you don’t mention the use of JavaScript or a JS-framework, here is a suggestion to solve it with the pure html form and server-side evaluation:

1. Give the checkboxes a telling name, like “check_blue” + “check_red”
2. On the server side, only process the color if the corresponding checkbox has been selected

If you only want to so submit or allow filling of the inputs according to the checkbox state, you have to use JavaScript (and should probably have mentioned that in your question or at least as a tag).