Как выбрать только одну радиокнопку из двух разных наборов форм? - PullRequest
Новая
       0

Как выбрать только одну радиокнопку из двух разных наборов форм?

0 голосов
/ 07 июня 2018 
<div class="div_services service_block">
   <div class="activenicksrv">
      <h5>Extreme Service</h5>
   </div>
   <div class="div_extservices">
      <ul>
         <li class="ui-corner-left">E Service 1</li>
         <li class="ui-corner-left">E Service 2</li>
         <li class="ui-corner-left">E Service 3</li>
         <li class="ui-corner-left">E Service 4</li>
         <li class="ui-corner-left">E Service 5</li>
         <li class="ui-corner-left">E Service 6</li>
         <li class="ui-corner-left">E Service 7</li>
         <li class="ui-corner-left">E Service 8</li>
      </ul>
      <form method="post" action="<?php echo base_url('services'); ?>">
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B1" />
            <label><span class="price">$7.99</span> - 1 Month</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B2" /> <label>
            <span class="price">$14.99</span> - 3 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B3" />
            <label><span class="price">$24.99</span> - 6 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B4" />
            <label><span class="price">$44.99</span> - 1 Year</label>
         </div>
         <div class="buynowbtnbox-ext buynowbtnbox">
            <input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
            <a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
         </div>
      </form>
   </div>
</div>
<!-- Extra Service -->
<div class="div_services service_block">
   <div class="extranicksrv">
      <h5>Executive Service</h5>
   </div>
   <div class="div_exeservices">
      <ul>
         <li class="ui-corner-left">E Service 1</li>
         <li class="ui-corner-left">E Service 2</li>
         <li class="ui-corner-left">E Service 3</li>
         <li class="ui-corner-left">E Service 4</li>
         <li class="ui-corner-left">E Service 5</li>
         <li class="ui-corner-left">E Service 6</li>
         <li class="ui-corner-left">E Service 7</li>
         <li class="ui-corner-left">E Service 8</li>
      </ul>
      <form method="post" action="<?php echo base_url('services'); ?>">
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G1" />
            <label><span class="price">$12.99</span> - 1 Month</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G2" /> <label>
            <span class="price">$23</span> - 3 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G3" />
            <label><span class="price">$40.99</span> - 6 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G4" />
            <label><span class="price">$59.99</span> - 1 Year</label>
         </div>
         <div class="buynowbtnbox-exe buynowbtnbox">
            <input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
            <a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
         </div>
      </form>
   </div>
</div>

Это то, что я пробовал, и мне нужно выбрать только одну радиокнопку из любой службы.Если выбрана одна услуга из пакета, другие службы пакета не должны выбираться. У меня есть 6 других пакетов. Пользователь должен иметь возможность выбирать по одной из этих различных наборов пакетов, пожалуйста, помогите.ТИА

Ответы [ 3 ]

0 голосов
/ 07 июня 2018

Вместо того, чтобы хранить два тега формы, просто сохраните один тег формы и сохраните весь HTML в этом теге формы. 

<form method="post" action="
<?php echo base_url('services'); ?>">
<div class="div_services service_block">
    <div class="activenicksrv">
        <h5>Extreme Service</h5>
    </div>
    <div class="div_extservices">
        <ul>
            <li class="ui-corner-left">E Service 1</li>
            <li class="ui-corner-left">E Service 2</li>
            <li class="ui-corner-left">E Service 3</li>
            <li class="ui-corner-left">E Service 4</li>
            <li class="ui-corner-left">E Service 5</li>
            <li class="ui-corner-left">E Service 6</li>
            <li class="ui-corner-left">E Service 7</li>
            <li class="ui-corner-left">E Service 8</li>
        </ul>
        <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B1" />
            <label>
                <span class="price">$7.99</span> - 1 Month
            </label>
        </div>
        <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B2" />
            <label>
                <span class="price">$14.99</span> - 3 Months
            </label>
        </div>
        <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B3" />
            <label>
                <span class="price">$24.99</span> - 6 Months
            </label>
        </div>
        <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B4" />
            <label>
                <span class="price">$44.99</span> - 1 Year
            </label>
        </div>
        <div class="buynowbtnbox-ext buynowbtnbox">
            <input type="hidden" name="
                <?php echo $csrf['name']; ?>" value="
                <?php echo $csrf['hash']; ?>" />
                <a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
            </div>
        </div>
    </div>
    <!-- Extra Service -->
    <div class="div_services service_block">
        <div class="extranicksrv">
            <h5>Executive Service</h5>
        </div>
        <div class="div_exeservices">
            <ul>
                <li class="ui-corner-left">E Service 1</li>
                <li class="ui-corner-left">E Service 2</li>
                <li class="ui-corner-left">E Service 3</li>
                <li class="ui-corner-left">E Service 4</li>
                <li class="ui-corner-left">E Service 5</li>
                <li class="ui-corner-left">E Service 6</li>
                <li class="ui-corner-left">E Service 7</li>
                <li class="ui-corner-left">E Service 8</li>
            </ul>
            <div class="buynowbtn" style="text-align: left;">
                <input name="service" type="radio" value="G1" />
                <label>
                    <span class="price">$12.99</span> - 1 Month
                </label>
            </div>
            <div class="buynowbtn" style="text-align: left;">
                <input name="service" type="radio" value="G2" />
                <label>
                    <span class="price">$23</span> - 3 Months
                </label>
            </div>
            <div class="buynowbtn" style="text-align: left;">
                <input name="service" type="radio" value="G3" />
                <label>
                    <span class="price">$40.99</span> - 6 Months
                </label>
            </div>
            <div class="buynowbtn" style="text-align: left;">
                <input name="service" type="radio" value="G4" />
                <label>
                    <span class="price">$59.99</span> - 1 Year
                </label>
            </div>
            <div class="buynowbtnbox-exe buynowbtnbox">
                <input type="hidden" name="
                    <?php echo $csrf['name']; ?>" value="
                    <?php echo $csrf['hash']; ?>" />
                    <a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
                </div>
            </div>
        </div>
    </form>
0 голосов
/ 07 июня 2018

Вы можете отключить или скрыть переключатель второй формы, если выбран переключатель первой формы или наоборот 

<div class="div_services service_block">
   <div class="activenicksrv">
      <h5>Extreme Service</h5>
   </div>
   <div class="div_extservices">
      <ul>
         <li class="ui-corner-left">E Service 1</li>
         <li class="ui-corner-left">E Service 2</li>
         <li class="ui-corner-left">E Service 3</li>
         <li class="ui-corner-left">E Service 4</li>
         <li class="ui-corner-left">E Service 5</li>
         <li class="ui-corner-left">E Service 6</li>
         <li class="ui-corner-left">E Service 7</li>
         <li class="ui-corner-left">E Service 8</li>
      </ul>
      <form method="post" class="activenicksrv_form" action="<?php //echo base_url('services'); ?>">
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B1" />
            <label><span class="price">$7.99</span> - 1 Month</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B2" /> <label>
            <span class="price">$14.99</span> - 3 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B3" />
            <label><span class="price">$24.99</span> - 6 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B4" />
            <label><span class="price">$44.99</span> - 1 Year</label>
         </div>
         <div class="buynowbtnbox-ext buynowbtnbox">
            <input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
            <a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
         </div>
      </form>
   </div>
</div>
<!-- Extra Service -->
<div class="div_services service_block">
   <div class="extranicksrv">
      <h5>Executive Service</h5>
   </div>
   <div class="div_exeservices">
      <ul>
         <li class="ui-corner-left">E Service 1</li>
         <li class="ui-corner-left">E Service 2</li>
         <li class="ui-corner-left">E Service 3</li>
         <li class="ui-corner-left">E Service 4</li>
         <li class="ui-corner-left">E Service 5</li>
         <li class="ui-corner-left">E Service 6</li>
         <li class="ui-corner-left">E Service 7</li>
         <li class="ui-corner-left">E Service 8</li>
      </ul>
      <form method="post" class="extranicksrv_form" action="<?php //echo base_url('services'); ?>">
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G1" />
            <label><span class="price">$12.99</span> - 1 Month</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G2" /> <label>
            <span class="price">$23</span> - 3 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G3" />
            <label><span class="price">$40.99</span> - 6 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G4" />
            <label><span class="price">$59.99</span> - 1 Year</label>
         </div>
         <div class="buynowbtnbox-exe buynowbtnbox">
            <input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
            <a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
         </div>
      </form>
   </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

   /*-----It will disable second form radio button---------*/
   $(".activenicksrv_form input[name=service]")
    .on("click", changeEvent);

   function changeEvent(event){
      if ($('.activenicksrv_form input[name=service]:checked').length > 0) {
         $(".extranicksrv_form input[type=radio]").attr('disabled', true);         
      }
   }

//--------


   /*-----It will disable first form radio button---------*/
   $(".extranicksrv_form input[name=service]")
    .on("click", changeEvent2);

   function changeEvent2(event){
      if ($('.extranicksrv_form input[name=service]:checked').length > 0) {
         $(".activenicksrv_form input[type=radio]").attr('disabled', true);         
      }
   }

</script>
0 голосов
/ 07 июня 2018

Поскольку имя одно и то же, я связываю обработчик событий для ввода и имени.

Я не знаю, используете ли вы jQuery или нет.

Для удобства я сделал это ниже,jQuery.

Единственное, что я сделал, это добавил обработчик событий. 

$('input[name="service"]').click(function(event){
   $('input[name="service"]:checked').not(this).prop('checked', false);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_services service_block">
   <div class="activenicksrv">
      <h5>Extreme Service</h5>
   </div>
   <div class="div_extservices">
      <ul>
         <li class="ui-corner-left">E Service 1</li>
         <li class="ui-corner-left">E Service 2</li>
         <li class="ui-corner-left">E Service 3</li>
         <li class="ui-corner-left">E Service 4</li>
         <li class="ui-corner-left">E Service 5</li>
         <li class="ui-corner-left">E Service 6</li>
         <li class="ui-corner-left">E Service 7</li>
         <li class="ui-corner-left">E Service 8</li>
      </ul>
      <form method="post" action="<?php echo base_url('services'); ?>">
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B1" />
            <label><span class="price">$7.99</span> - 1 Month</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B2" /> <label>
            <span class="price">$14.99</span> - 3 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B3" />
            <label><span class="price">$24.99</span> - 6 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="B4" />
            <label><span class="price">$44.99</span> - 1 Year</label>
         </div>
         <div class="buynowbtnbox-ext buynowbtnbox">
            <input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
            <a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
         </div>
      </form>
   </div>
</div>
<!-- Extra Service -->
<div class="div_services service_block">
   <div class="extranicksrv">
      <h5>Executive Service</h5>
   </div>
   <div class="div_exeservices">
      <ul>
         <li class="ui-corner-left">E Service 1</li>
         <li class="ui-corner-left">E Service 2</li>
         <li class="ui-corner-left">E Service 3</li>
         <li class="ui-corner-left">E Service 4</li>
         <li class="ui-corner-left">E Service 5</li>
         <li class="ui-corner-left">E Service 6</li>
         <li class="ui-corner-left">E Service 7</li>
         <li class="ui-corner-left">E Service 8</li>
      </ul>
      <form method="post" action="<?php echo base_url('services'); ?>">
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G1" />
            <label><span class="price">$12.99</span> - 1 Month</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G2" /> <label>
            <span class="price">$23</span> - 3 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G3" />
            <label><span class="price">$40.99</span> - 6 Months</label>
         </div>
         <div class="buynowbtn" style="text-align: left;">
            <input name="service" type="radio" value="G4" />
            <label><span class="price">$59.99</span> - 1 Year</label>
         </div>
         <div class="buynowbtnbox-exe buynowbtnbox">
            <input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
            <a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
         </div>
      </form>
   </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...