Why Can't Radio Buttons Be "Readonly"

Why can't radio buttons be readonly ?

I've faked readonly on a radio button by disabling only the un-checked radio buttons. It keeps the user from selecting a different value, and the checked value will always post on submit.

Using jQuery to make readonly:

$(':radio:not(:checked)').attr('disabled', true);

This approach also worked for making a select list readonly, except that you'll need to disable each un-selected option.

How to make disabled/readonly functionality for radio buttons and checkboxes

You can use the following code to avoid clicks on elements you don't want user to change

$(':radio,:checkbox').click(function(){
    return false;
});

You can use proper selector to limit the clicks.

Make Disabled Radiobuttons not greyed out (Behave as read-only)

Not a really beautiful solution as @cdeszaq pointed out.
But all you need to do is "recheck" the originally checked button.
Working Fiddle.

IE can't use return false on radio button

<input type="radio" readonly /> does not work, but using click does partly work. If you have two radios with the same name, IE will however still uncheck the checked one regardless with this code

$("body").on("click", ".readonly", function(e) {  e.preventDefault();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><input name="rad" type="radio" class="readonly" /><input name="rad" type="radio" checked class="readonly" />

Changing read only input field text according to radio button selection

There's a couple of issues with your code to start with. If you check in the browser console you will see errors and specific line numbers where they occurred - that's always a good place to start.

First, getElementsByName returns a collection of elements, so you need to loop over it and attach event listeners one by one. You can't just call addEventListener to apply them all at once like you do with jquery, for example. Take a look at the documentation for that function here: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

Second, you're trying to update the output element by setting its innerHTML, but that element is a number input. You need to update its value property instead.

Here's a snippet bringing all that together.

const radios = document.getElementsByName('package')

radios.forEach(function(radio) {
  radio.addEventListener('change', function() {
    document.getElementById("output").value = this.value;
  })
})

<div class="input_box">
  <h4 style="text-align: center;">إختر الباقة</h4>
  <input type="radio" name="package" class="radio" id="pk1" value="70">
  <label for="pk1">بالساعة</label>
  <input type="radio" name="package" class="radio" id="pk2" value="200">
  <label for="pk2">يوم</label>
  <input type="radio" name="package" class="radio" id="pk3" value="2500">
  <label for="pk3">شهر</label>
</div>
<div class="input_box">
  <input type="number" placeholder="Total Value" name="price" class="name" id="output">
  <i class="fa fa-money icon" aria-hidden="true"></i>
</div>

xamarin radio buttons not displaying

In my data template, I had to add an explicit WidthRequest = 150

                        <StackLayout 
                            RadioButtonGroup.GroupName="{Binding ChoiceList.Code}"
                            RadioButtonGroup.SelectedValue="{Binding Value}"
                            BindableLayout.ItemsSource="{Binding ChoiceList.Choices}"
                            BindableLayout.EmptyView="No choices available"                            
                            Orientation="Horizontal"
                            Margin="10,0,0,0">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <RadioButton Value="{Binding Value}"
                                        Content="{Binding Label}"                                        
                                        IsChecked="{Binding IsSelected}"
                                        VerticalOptions="Center"
                                        IsClippedToBounds="False"
                                        HeightRequest="27"
                                        WidthRequest="150"
                                        CheckedChanged="OnRadioChanged">
                                    </RadioButton>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>

I guess the StackLayout wasn't able to calculate how wide to make each one. Will see if I can figure out a different way to do it so it adjusts for the width of the content.

Why Can't Radio Buttons Be "Readonly"