Создать правило для одного выбора в переключателе

Question

Я хотел бы создать правило, в котором я бы обязал пользователя выбирать только одно значение радиосвязи. Однако, когда кнопка зациклена, она позволяет выбрать несколько и, кроме того, не дать пользователю удалить клик

var now = document.getElementsByName("now");
var day = document.getElementsByName("day");
var week = document.getElementsByName("week");

if ($("#now").prop("checked", true)) {

    day[0].checked = false
    week[0].checked = false

} else if ($("#day").prop("checked", true)) {

    now[0].checked = false
    week[0].checked = false

} else if ($("#week").prop("checked", true)) {

    now[0].checked = false
    day[0].checked = false

} else {
    console.log("undefined radio")
}

<h1>Select action</h1>
<br>
<label class="control control--radio">Shoot Now
    <input type="radio" name="now" id="now" value="now" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a day
    <input type="radio" name="day" id="day" value="0 * * * *" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a week
    <input type="radio" name="week" id="week" value="0 * * * 1" autofocus/>
    <div class="control__indicator"></div>
</label>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

Answer 1

Если вы дадите всем своим radio button одинаковые name property, вы сможете выбрать только один из них.

Например, дать всем name="now".

* 1007. *

<h1>Select action</h1>
<br>
<label class="control control--radio">Shoot Now
    <input type="radio" name="now" id="now" value="now" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a day
    <input type="radio" name="now" id="day" value="0 * * * *" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a week
    <input type="radio" name="now" id="week" value="0 * * * 1" autofocus/>
    <div class="control__indicator"></div>
</label>

В дополнение к вашему вопросу о:

не разрешать пользователю удалять клик

Это потому что переключатели не могут быть отменены , вместо этого следует использовать checkbox.

<input type="checkbox" id="your_id" name="your_name" value="your_value">

<h1>Select action</h1>
<br>
<form>
<label class="control control--radio">Shoot Now
    <input type="checkbox" name="now" id="now" value="now" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a day
    <input type="radio" name="now" id="day" value="0 * * * *" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a week
    <input type="radio" name="now" id="week" value="0 * * * 1" autofocus/>
    <div class="control__indicator"></div>
</label>
</form>

Answer 2

Если вы делаете что-то подобное, вы можете достичь своей цели.

<h1>Select action</h1>
<br>
<label class="control control--radio">Shoot Now
    <input type="radio" name="period" id="now" value="now" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a day
    <input type="radio" name="period" id="day" value="0 * * * *" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a week
    <input type="radio" name="period" id="week" value="0 * * * 1" autofocus/>
    <div class="control__indicator"></div>
</label>

PS: Если вам нужно больше сделать ком mnet на нем.

Answer 3

если ваши радиокнопки имеют одинаковое имя, то разрешено нажимать только 1 одновременно

<h1>Select action</h1>
<br>
<label class="control control--radio">Shoot Now
    <input type="radio" name="now" id="now" value="now" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a day
    <input type="radio" name="now" id="day" value="0 * * * *" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a week
    <input type="radio" name="now" id="week" value="0 * * * 1" autofocus/>
    <div class="control__indicator"></div>
</label>