检查无线电时删除类

Posted 2021-04-14

我有一个按钮簿，如果检查了收音机，那么按钮簿中禁用的所有课程都将被删除，如果只检查了那个，那么按钮书仍然被禁用。

我试图使它的功能，但不工作。

$(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>

答案

可能这就是你想要的......

$(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>