Отмеченный ввод не снимается при нажатии других вводов

Question

У меня есть три кнопки, которые пользователь может нажимать. По умолчанию у меня уже нажата первая, потому что я не хочу, чтобы пользователь отправлял форму, ничего не нажимая. Проблема в том, что в мобильных телефонах, если я нажимаю другую кнопку, у которой нет атрибута 'checked', она нажимается нормально, но кнопка, отмеченная по умолчанию, не исчезает. Это отлично работает на компьютере, но не на мобильных устройствах. Есть идеи?

Это мой код:

<div class="control radio-toolbar" id="duration-picker">
  <div class="control radio-toolbar container fm-radios">
    <div style="display: inline-block" class="fm-radio dib">
      <input checked class="date-button" type="radio" value="1" name="options" id="letter_pick_date_1" />

      <label for="letter_pick_date_1">1 year</label>
    </div>
    <div style="display: inline-block" class="fm-radio dib">
      <input class="date-button" type="radio" value="3" name="options" id="letter_pick_date_3" />
      <label for="letter_pick_date_3">3 years</label>
      <br><br>
    </div>
    <div style="display: inline-block" class="fm-radio dib">
      <input class="date-button" type="radio" value="5" name="options" id="letter_pick_date_5" />
      <label for="letter_pick_date_5">5 years</label>
    </div>
  </div>
</div>

Также один находится над другим и не знает, как это решить. Я отображал их встроенными, но не работал

РЕДАКТИРОВАТЬ: Еще я мог бы сделать, чтобы не было проверенных входов по умолчанию. Но как сделать так, чтобы никто не отправлял форму, не нажимая кнопки?