Question

我正在尝试点击以使用单选按钮显示提交按钮。但我有一个问题..

我已经从 codepen.io

创建了 DEMO

在此演示中，您可以看到有六个单选按钮。（例如:)第一个树单选按钮用于xx，第二个树单选按钮用于yy。

我为这两个部分做了一个提交按钮。当您更改第一部分中三个单选按钮中的任何一个时，第一个提交按钮会自动显示：block;但同时第二部分提交按钮是display:block;我不想要它。

我想点击第一部分单选按钮然后第一部分提交按钮display:block;同样考虑第二部分。

我怎么能这样做，任何人都可以在这方面帮助我？

HTML

<div class="container">

  <div class="radio_wrp">
  <input type="radio" name="x" class="yesno rdbtn"/>Yes
  <input type="radio" name="x" class="yesno rdbtn"/>No
  <input type="radio" name="x" class="yesno rdbtn" checked/>Maybe
  </div>
  <div class="submitbutton"><input type="submit" class="first"></div>
</div>
<div class="container">

  <div class="radio_wrp">
  <input type="radio" name="y" class="yesno rdbtn" checked/>Yes
  <input type="radio" name="y" class="yesno rdbtn"/>No
  <input type="radio" name="y" class="yesno rdbtn"/>Maybe
  </div>
  <div class="submitbutton"><input type="submit" class="first"></div>
</div>

CSS

.container {
  width:500px;
  margin:0px auto;
  margin-top:50px;
}
.yesno {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 30px;
  height: 20px;
  border-radius: 14px;
  outline: 0;
  background: #9da6b0;
  -webkit-transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.yesno:after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 11px;
  position: relative;
  top: 3px;
  left: 3px;
  -webkit-transition: all 0.15s ease-in-out;
}
.yesno:checked {
  background: #529ecc;
}
.yesno:checked:after {
  left: 13px;
}
.radio_wrp {
  float:left;
  width:500px;
  height:auto;
}
.submitbutton {
  float:left;
  width:50px;
  height:50px;
}
.first {display:none;}
.second{display:none;}

的javascript

$(document).ready(function(){
        $('.rdbtn').click(function(){
            $('.first').show();
        });
    });

注意：我知道是否更改了第二部分提交按钮的类名不显示：块;点击第一部分单选按钮时。

Answer 1

检查这个答案应该对你有帮助.. http://jsfiddle.net/j08691/VFJGD/

    <input type="radio" name="TermLease" value="No" onclick="TermLeaseMonths.disabled=true"/>No
<input type="radio" name="TermLease" value="Yes"  onclick="TermLeaseMonths.disabled=false"/>Yes | 
How many months:<input type="hidden" name="TermLeaseMonths"  value="0" />
<input type="submit" name="TermLeaseMonths" id="TermLeaseMonths" size="1" disabled="disabled"/>

Answer 2

不完全确定你需要什么，但也许这会指出你正确的方向：

$(document).ready(function(){
    $('.rdbtn').click(function(){
       $('.first').hide(); //if you want to hide one that is already shown
       $(this).closest('.container').find('.first').show();           
    });
});

Demo

使用$(this)获取点击的广播，然后将其用作定位点。它使用closest，它可以找到父container，然后只需要finds您想要的按钮。

Answer 3

使用parents（）也可以完成：

<强> JS

$(document).ready(function(){
     $('.rdbtn').click(function(){
        $('.first').hide(); 
        $(this).parents('.container').find('.first').show();  
     });
   });

DEMO

Answer 4

请找closest('.container')喜欢

$(document).ready(function(){
    $('.rdbtn').click(function(){
        $(this).closest('.container').find('.first').show() ; 
    });
});

JSFIDDLE Link check here

单击单选按钮，然后显示提交按钮

4 个答案: