Как сохранить нажатие кнопки при нажатии другой кнопки на той же странице с помощью начальной загрузки? - PullRequest
Новая
       2

Как сохранить нажатие кнопки при нажатии другой кнопки на той же странице с помощью начальной загрузки?

0 голосов
/ 03 мая 2019

При нажатии одной из синих кнопок (за один раз можно выбрать только одну) она выбирается.Но когда я нажимаю кнопку Buy, предыдущая синяя кнопка становится невыбранной.Поэтому я не могу прочитать значение синей кнопки по onclick желтой кнопки.

Fiddle здесь . 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Sign in Success</title>
</head>
<body>
    <div class="btn-group" style="background:black;width:100%">
        <button type="button" class="btn btn-default">Tr</button>
        <div style="width:10px"></div>
        <button type="button" class="btn btn-default">T</button>
        <div style="width:10px"></div>
        <button type="button" class="btn btn-default">Vt</button>
        <div style="width:10px"></div>
        <button type="button" class="btn btn-default">Rt</button>
    </div>
    <br> <br>
    <h2 style="text-decoration:underline;" align="center">T</h2>
    <div align="center"><!-- id="centerit" -->
        <br> <br> <br>
        <!-- <div style="width:50px"></div> -->
        <button type="button" class="btn btn-primary cust" value="bu">Butter</button>
        <button type="button" class="btn btn-primary cust" value="mi">Milk</button>
        <button type="button" class="btn btn-primary cust" value="bi">Biscuit</button>
        <br> <br>
        <button type="button" class="btn btn-warning" value = "submit">Buy!</button>
    </div>
</body>
</html>

Я ожидаю, что blue button останетсявыбирается, когда я нажимаю buy button, чего сейчас не происходит.

Ответы [ 2 ]

1 голос
/ 03 мая 2019

Попробуйте добавить вместо кнопок переключатели

Это то, что вам нужно 

<div id="radioBtn" class="btn-group">
    <a class="btn btn-primary btn-sm active" data-toggle="fun" data-title="bu">Butter</a>
    <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="mi">Milk</a>
    <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="bi">Biscuit</a>
</div>

<script>
    $('#radioBtn a').on('click', function(){
    var sel = $(this).data('title');
    var tog = $(this).data('toggle');
    $('#'+tog).prop('value', sel);

    $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
    $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
</script>

<style>
#radioBtn .notActive{
    color: #3276b1;
    background-color: #fff;
}
</style>

Вот обновленное JSFiddle

1 голос
/ 03 мая 2019

Вы можете поместить свои кнопки в форму и заменить три синие кнопки переключателями.См. Документацию здесь: https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

Обновленная скрипта: https://jsfiddle.net/0wj1m8ce/

 <div class="btn-group btn-group-toggle"  data-toggle="buttons" >
      <label class="btn btn-primary cust">
        <input type="radio" name="options" id="option1" autocomplete="off" value="bu"> Butter
      </label>
      <label class="btn btn-primary cust">
        <input type="radio" name="options" id="option2" autocomplete="off" value="mi"> Milk
      </label>
      <label  class="btn btn-primary cust">
        <input type="radio" name="options" id="option3" autocomplete="off" value="bi" > Biscuit
      </label>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...