Блог

Главная - Вопросы по программированию - Кнопка активна, когда выбран параметр

Кнопка активна, когда выбран параметр

#javascript

#javascript

Вопрос:

Я хочу, чтобы кнопка была пассивной.Кнопка должна быть активной при выборе опции. Можно выбрать только один параметр.

 <div id="form">
    <form action="#" method="post">

        <br><br>
        <input type="radio" id="terms" name="terms" onchange="on()">option 1.
        <br><br>
                <input type="radio" id="terms2" name="terms2" onchange="on()">option 2.
        <br><br>
                <input type="radio" id="terms3" name="terms3" onchange="on()">option 3.
        <br><br>
        <button type="submit" id="gonder" disabled>Send</button>
    </form>
</div>

Ответ №1:

Сохраняйте то же name самое для всех радиостанций button , чтобы выбирать по одному за раз.

А также определите onchange метод.

 function on() {
 $('#gender').attr('disabled', false);
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
    <form action="#" method="post">

        <br><br>
        <input type="radio" id="terms1" name="term" onchange="on()">option 1.
        <br><br>
                <input type="radio" id="terms2" name="term" onchange="on()">option 2.
        <br><br>
                <input type="radio" id="terms3" name="term" onchange="on()">option 3.
        <br><br>
        <button type="submit" id="gender" disabled>Send</button>
    </form>
</div>

Ответ №2:

Просто определите функцию go(), как в этом фрагменте.

 

    <div id="form">
        <form action="#" method="post">
            <br><br>
            <input type="radio" id="terms" name="terms" onchange="on()">option 1.
            <br><br>
            <input type="radio" id="terms2" name="terms2" onchange="on()">option 2.
            <br><br>
            <input type="radio" id="terms3" name="terms3" onchange="on()">option 3.
            <br><br>
            <button type="submit" id="gonder" disabled>Send</button>
        </form>
    </div>
    <script>
        function on() {
            document.getElementById("gonder").removeAttribute("disabled");
        }
    </script>
 Run code snippetHide resultsExpand snippet

Ответ №3:

Попробуйте сделать так:

 function on() {
   document.getElementById("gonder").removeAttribute("disabled");
}  
 <div id="form">
    <form action="#" method="post">

        <br><br>
        <input type="radio" id="terms" name="terms" onchange="on()">option 1.
        <br><br>
                <input type="radio" id="terms2" name="terms" onchange="on()">option 2.
        <br><br>
                <input type="radio" id="terms3" name="terms" onchange="on()">option 3.
        <br><br>
        <button type="submit" id="gonder" disabled>Send</button>
    </form>
</div>

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

Комментарии:

1. это не означает, что пользователь может выбрать только один вариант.

2. Чтобы это произошло, присвоите переключателю те же имена

3. Спасибо, что указали на это, я обновил ответ, чтобы сделать это сейчас.

Ответ №4:

для @csgoempire

 <div id="form">
<form action="#" method="post">
    <button id="reselect">
      reselect
    </button>
    <br><br>
    <input type="radio" id="terms" name="terms"> option 1.
    <br><br>
            <input type="radio" id="terms2" name="terms2" >option 2.
    <br><br>
            <input type="radio" id="terms3" name="terms3" >option 3.
    <br><br>
    <button type="submit" id="gonder" disabled>Send</button>
</form>

привет, попробуйте этот, который я уже тестировал на jsfiddle

 $('input[type="radio"]').on('click',function(){
        if(!$('input[type="radio"]').prop('checked')){
        $('input[type="radio"]').attr('disabled',true);
    };
});

$('#reselect').on('click', function(){
    $('input[type="radio"]').attr('disabled',false);
});

https://jsfiddle.net/a3rj4zsp/9/