Pick up radio value and pass to an Hidden input with same name

Question

I need to get the value of all radio input (that are checked) of my page, has around 10 radio, the value is loaded directly from the database, but they are disabled because the user can not change the value, they are already checked, I need to pass the value of these checkbox disabled to the Hidden input, because as you may already know, disabled inputs do not have the data sent to php.

Follows code: https://jsfiddle.net/h3ept1r5/1/

<div class="form-group">
  <input type="hidden" name="a">
  <div class="radio">
    <label for="yes1">
      <input type="radio" name="a" id="yes1" checked> Yes
    </label>
    <label for="no1">
      <input type="radio" name="a" id="no1"> No
    </label>
  </div>
</div>
<div class="form-group">
  <input type="hidden" name="b">
  <div class="radio">
    <label for="yes2">
      <input type="radio" name="b" id="yes2"> Yes
    </label>
    <label for="no2">
      <input type="radio" name="b" id="no2" checked> No
    </label>
  </div>
</div>
<div class="form-group">
  <input type="hidden" name="c">
  <div class="radio">
    <label for="yes3">
      <input type="radio" name="c" id="yes3" checked> Yes
    </label>
    <label for="no3">
      <input type="radio" name="c" id="no3"> No
    </label>
  </div>
</div>
<button class="btn btn-default">Submit</button>

Answer 1

Instead of using the property disabled, do the event onclick returns false, so the normal action will not be executed and the user will not be able to uncheck the option.

With this solution, your field will be sent in the body of the request message.

<input type="radio" checked onclick="return false;" onkeydown="return false;"/>

There may be a problem, as the option is not disabled and only prevents the user from clicking, you can add the property disabled only in options that are unchecked:

<input type="radio" checked onclick="return false;" onkeydown="return false;"/> Sim
<input type="radio" disabled onclick="return false;" onkeydown="return false;"/> Não

See in operation: https://jsfiddle.net/h3ept1r5/3/

Another option is to use CSS and style input.

You can see in this topic why the above solution works: Why "Return false;" in a click event cancels the opening of the link?, although the question portrays a link, the explanation also serves for a radio button.

Answer 2

You can do each on your radio input by traversing and transferring the values to the Hidden input.

I used Parent() and sibligns to locate Hidden and insert the value.

Example:

$('input[type=radio]').attr('disabled', true);
$('input[type=radio]:checked').each(function() {
   $(this).parent().parent().siblings('input[type=hidden]').val(this.value);
});

See working on jsfiddle

Or as suggested by Filipe, add a css simulating the disabled and give a false Return.

Example:

$('input[type=radio]').css('opacity', '0.5');
$('input[type=radio]').on('click , keydown', function() {
  return false;
});

See working on jsfiddle