代码之家 › 专栏 › 技术社区 › Ramesh Diego Lins de Freitas

无法选中弹出窗体中的单选按钮

radio-group radio-button css jquery

0

Ramesh Diego Lins de Freitas · 技术社区 · 6 年前

我有一个按钮点击事件的弹出窗体。弹出窗口工作正常。但我无法检查表单中的单选按钮。不仅是单选按钮,还有其他一些输入字段。

这是我试过的密码。我用过 z-index 以得到不同层次的差异。但没用。

    $('#call-form').click(function(e){
      $('.req-cal-wrapper').fadeIn();
    });

    $('.req-cal-wrapper').on('click touch', function () {
      $('.inside-form').click(function(e){
        // e.stopPropagation;
        return false;
      });
      $('.req-cal-wrapper').fadeOut();
    });

 .req-cal-wrapper {
      position: fixed;
      height: 100vh;
      width: 100vw;
      background: #00000070;
      color: black;
      z-index: 999;
      top: 0;
      text-align: left;
    }
    .req-cal-wrapper>div {
      position: absolute;
      background: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 50px 60px;
      border-radius: 10px;
      font-family: 'Roboto', sans-serif;
      width: 500px;
      z-index: 1499;
    }
    .req-cal-wrapper>div>.btn-wrapper {
      margin-top: 15px;
      font-size: 14px;
      padding-bottom: 35px;
    }
    .req-cal-wrapper>div>.btn-wrapper ul {
      list-style-type: none;
    }
    .req-cal-wrapper>div>.btn-wrapper ul>li {
      float: left;
    }
    .req-cal-wrapper>div>.btn-wrapper ul>li input {
      float: left;
    }
    .req-cal-wrapper>div>.btn-wrapper ul>li p {
      margin-bottom: 0;
      float: right;
      margin-left: 2px;
      margin-right: 35px;
      font-weight: 400;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="req-cal-wrapper">
        <div class="inside-form">
           <div class="btn-wrapper">
              <ul>
                 <li><input type="radio" name="radio"><p>Phone</p></li>
                 <li><input type="radio" name="radio"><p>Whatsapp</p></li>
                 <li><input type="radio" name="radio"><p>Viber</p></li>
                 <li><input type="radio" name="radio"><p>Email</p></li>
               </ul>
           </div>
      </div>
    </div>

1 回复 | 直到 6 年前

1

AlexiAmni 6 年前

所以我把 .inside-form 从主div中跳出,它可以按你的要求工作。

 

    $('.req-cal-wrapper').click(function () {
     $('.req-cal-wrapper').fadeOut();
     $('.inside-form').fadeOut();
      });

.req-cal-wrapper {
      position: relative;
      height: 100vh;
      width: 100vw;
      background: #00000070;
      color: black;
     
      top: 0;
      text-align: left;
    }
    
    .inside-form {
      position: absolute;
      background: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 50px 60px;
      border-radius: 10px;
      font-family: 'Roboto', sans-serif;
      width: 500px;
     
    }
    .btn-wrapper {
      margin-top: 15px;
      font-size: 14px;
      padding-bottom: 35px;
       
    }
.btn-wrapper ul {
      list-style-type: none;
       
    }
  .btn-wrapper ul>li {
      float: left;
        
    }
   .btn-wrapper ul>li input {
      float: left;
        
    }
   .btn-wrapper ul>li p {
      margin-bottom: 0;
      float: right;
      margin-left: 2px;
      margin-right: 35px;
      font-weight: 400;
       
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="req-cal-wrapper">
       
    </div>
     <div class="inside-form">
           <div class="btn-wrapper">
              <ul>
                 <li><input type="radio" name="radio"><p>Phone</p></li>
                 <li><input type="radio" name="radio"><p>Whatsapp</p></li>
                 <li><input type="radio" name="radio"><p>Viber</p></li>
                 <li><input type="radio" name="radio"><p>Email</p></li>
               </ul>
           </div>
      </div>