Как проверить, установлен ли переключатель для отображения кнопки, чтобы продолжить - PullRequest
1 голос
/ 13 января 2020

У меня есть две радиокнопки, чтобы выбрать способ доставки при оформлении заказа. Я хочу проверить с помощью jquery, установлен ли один из этих переключателей, появится кнопка для обработки с извлечением, в противном случае она будет скрыта.

HTML / PHP

<form method="get">
   <label class="ship-method" style="float: left; margin-right: 20px;">
   <input type="radio" name="dm_shipping_option" id="tttm_courier" value="1" onclick="getCourier(1);" />
   <?php echo $shipping_costs; ?>&euro;&nbsp;<?php echo getValue('name','banners',3); ?>
   <?php echo "<br />"; ?>
   <span class="ship-desc"><?php echo getValue('content','banners',3); ?></span>
   </label>
   <label class="ship-method" style="float: left; margin-right: 20px;">
   <input type="radio" name="dm_shipping_option" id="client_courier" value="0" onclick="getCourier(0);" />
   <?php echo getValue('name','banners',2); ?>
   <?php echo "<br />"; ?>
   <span class="ship-desc"><?php echo getValue('content','banners',2); ?></span>
   </label>
</form>

Jquery

 <script type="text/javascript">
    $(document).ready(function () {
        var isCheckedTTCourier = $('#tttm_courier').prop('checked');
        var isCheckedCourier = $('#client_courier').prop('checked');
        if (!isCheckedTTCourier) {
            $("#submit-btn").css('display', 'none');
        } else {
            $("#submit-btn").css('display', 'block');
        }
    });
</script>

Ответы [ 5 ]

2 голосов
/ 13 января 2020

Попробуй это! Я сделал образец фрагмента для вас, который работает, как и ожидалось. Вы можете переключать кнопки в зависимости от условий.

function getCourier(id) {
  var isCheckedTTCourier = $('#tttm_courier').prop('checked');

  var isCheckedCourier = $('#client_courier').prop('checked');

  $("#submit-btn").toggle(isCheckedTTCourier || isCheckedCourier);
};
#submit-btn {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get">
  <label class="ship-method" style="float: left; margin-right: 20px;"> Radio Button 1
   <input type="radio" name="dm_shipping_option" id="tttm_courier" value="1" onclick="getCourier(1);" />

   <label class="ship-method" style="float: left; margin-right: 20px;"> Radio Button 2
   <input type="radio" name="dm_shipping_option" id="client_courier" value="0" onclick="getCourier(0);" />
   
   <br />
   <br />
    <button id="submit-btn">Submit</button>
</form>
2 голосов
/ 13 января 2020

Вы можете попробовать это:

if (!isCheckedTTCourier) {
    $("#submit-btn").hide();
} else {
    $("#submit-btn").show();
}
2 голосов
/ 13 января 2020

Просто небольшое изменение в вашем коде, надеюсь, это поможет.

if($('#tttm_courier').attr('checked', true)){
    $("#submit-btn").css('display','block');
}else {
    $("#submit-btn").css('display','none');
}
1 голос
/ 13 января 2020

$ (# id) .is (': флажок')

Это даст информацию о том, отмечена ли конкретная кнопка или нет

1 голос
/ 13 января 2020

Вы можете использовать .toggle(condition):

$("#submit-btn").toggle(isCheckedTTCourier || isCheckedCourier);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...