【问题标题】:remove class when radio is checked检查收音机时删除类
【发布时间】:2017-12-24 23:21:45
【问题描述】:

如果选中了收音机,我有一本按钮书,所有在按钮书中禁用的类都将被删除,如果只选中了一个,那么按钮书保持禁用状态。

我已经尝试过让它的功能,但没有工作。

$(document).ready(function() {
  var departInput = $('#flightResultOneway input:radio');
  var returnInput = $('#flightResultReturn input:radio');

  $(departInput).click(function() {
    $('#flightResultOneway input:not(:checked)').parent().addClass('hide');
    $('#flightResultOneway input:checked').parent().removeClass('hide');
  });

  $(returnInput).click(function() {
    $('#flightResultReturn input:not(:checked)').parent().addClass('hide');
    $('#flightResultReturn input:checked').parent().removeClass('hide');
  });
});

// BUTTON BOOK
if($('#flightResultOneway input:checked')){
	$('#book').removeClass('disabled');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="flightResultOneway" class="list-result">
<h1>Depart</h1>
  <div class="result-list">
    <label class="item">
      <input type="radio" name="depart">lion
    </label>
    <label class="item">
      <input type="radio" name="depart">citi
    </label>
  </div>
</div>
<div id="flightResultReturn" class="list-result">
<h1>Return</h1>
  <div class="result-list">
    <label class="item">
      <input type="radio" name="return">citi
    </label>
    <label class="item">
      <input type="radio" name="return">lion
    </label>
  </div>
</div>

<div class="next-book">
  <a href="#" id="book" class="btn btn-primary disabled">book</a>
</div>

【问题讨论】:

  • 您能否更具体地描述您的问题,以便我们解决问题。
  • 检查你的小提琴link
  • 如果收音机未选中按钮书禁用,我想这样做。检查所有按钮簿时。谢谢

标签: javascript jquery radio-button


【解决方案1】:

也许这就是你想要的......

$(document).on("change", "input[type='radio']", function(){
    $("input[type='radio']").each(function(){
    $("#book").attr("disabled", false);
        if($(this).is(":checked") === false){
            $("#book").attr("disabled", true);
        }
    }); 
});

还有你的html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="flightResultOneway" class="list-result">
<h1>Depart</h1>
  <div class="result-list">
    <label class="item">
      <input type="radio" name="depart">lion
    </label>
    <label class="item">
      <input type="radio" name="depart">citi
    </label>
  </div>
</div>
<div id="flightResultReturn" class="list-result">
<h1>Return</h1>
  <div class="result-list">
    <label class="item">
      <input type="radio" name="return">citi
    </label>
    <label class="item">
      <input type="radio" name="return">lion
    </label>
  </div>
</div>

<div class="next-book">
  <a href="#" id="book" class="btn btn-primary disabled">book</a>
</div>

【讨论】:

猜你喜欢
  • 2016-05-29
  • 2010-12-20
  • 2015-08-26
  • 2017-11-20
  • 1970-01-01
  • 1970-01-01
  • 2011-03-23
  • 1970-01-01
  • 2018-10-10
相关资源
最近更新 更多