javascript - 单击单选按钮然后显示提交按钮

Question

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

我创建了这个 DEMO 来自 codepen.io

在此演示中，您可以看到有一个六个单选按钮。 (例如:)第一个树形单选按钮用于 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();
        });
    });

Note: I know if i change the class name for second part submit button is not display:block; when clicked first part radio buttons.

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"/>