已禁用单选按钮值丢失并传递最后一个隐藏的输入值

Question

In my Wordpress plugin that I'm developing, I'm using the WordPress settings api. In the callback that I use to display the setting which contains the radio buttons I enable them and disable them based on a checkbox value. Anyways, I tried to use a hidden input to store their value even though their disabled but that made the situation worse since it always took the value of the last hidden input which in my case was "4".

if(get_option( 'display_style' ) == 2){
$disabled = 'disabled';
}
$html = '<input type="radio" id="onecolumn" class="cardchecked" name="card_columns" value="1"' . checked( 1, get_option( 'card_columns' ), false ) . $disabled . '/>';  
$html .= '<input type="hidden" name="card_columns" value="1" />';  
$html .= '<label for="onecolumn">One</label>';  

$html .= '<input type="radio" id="twoclumn" class="cardchecked" name="card_columns" value="2"' . checked( 2, get_option( 'card_columns' ), false ) . $disabled . '/>';  
$html .= '<input type="hidden" name="card_columns" value="2" />';  
$html .= '<label for="twoclumn">Two</label>';  

$html .= '<input type="radio" id="threecolumn" class="cardchecked" name="card_columns" value="3"' . checked( 3, get_option( 'card_columns' ), false ) . $disabled . '/>';  
$html .= '<input type="hidden" name="card_columns" value="3" />';  
$html .= '<label for="threecolumn">Three</label>';  

$html .= '<input type="radio" id="fourcolumn" class="cardchecked" name="card_columns" value="4"' . checked( 4, get_option( 'card_columns' ), false ) . $disabled . '/>';  
$html .= '<input type="hidden" name="card_columns" value="4" />';  
$html .= '<label for="fourcolumn">Four</label>';  
echo $html;

Answer 1

The hidden input name can not be the same as the radio input's name because it's value is constant and will override the value of any previous input with the same name.

if(get_option( 'display_style' ) == 2){
$disabled = 'disabled';
}
$html .= '<input type="hidden" name="card_columns" value="1" />'; 
$html = '<input type="radio" id="onecolumn" class="cardchecked" name="card_columns" value="1"' . checked( 1, get_option( 'card_columns' ), false ) . $disabled . '/>';    
$html .= '<label for="onecolumn">One</label>';  
...

You will have to set the value of the hidden input field with javascript. Placing just one hidden input at the top of your radio will insure that if the radio button are disabled that the value of the hidden input is submitted, but if your radio buttons are enable they will override the value the hidden input.