Question

我有点迷失在这里。我试图将id #total的内容更改为“不符合条件”，如果用户在“国家”中选择“数据类”为“假”的选项，则选择无线电“值”为“业务”。因此，如果select为False且radio是business，则将#total更改为不符合条件。

$(document).ready(function() {
  $('.countries').change(function() {
    var self = $(this).find('option:selected')
    $('input:radio[name="service"]').change(
      function() {
        if ($(this).val() == 'Business' && self.attr("data-class") == 'False') {
          return $('#total').text('Not Eligible')
        }
      }
    ).change()
  }).change()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control countries">
  <option value="AUSTRALIA" data-class="False" data-tx_1="63">AUSTRALIA</option>
  <option value="USA" data-class="True" data-tx_1="65">USA</option>
  <option value="GERMANY" data-class="True" data-tx_1="69">GERMANY</option>
</select>
<br><br>
<label for="id_service_0"><input type="radio" name="service" value="Economy" required id="id_service_0" />Economy</label>
<label for="id_service_1"><input type="radio" name="service" value="Business" required id="id_service_1" />Business</label>
<label for="id_service_2"><input type="radio" name="service" value="First" required id="id_service_2" />First</label>

<p>Total Price is <span id="total"></span></p>

Answer 1

我相信你的代码确实有效。您认为不是的原因可能是您没有重置标签文本。请参阅下面的我的代码段。我刚刚在你的内部if语句中添加了“else”条件。

$(document).ready(function() {
  $('.countries').change(function() {
    var self = $(this).find('option:selected')
    $('input:radio[name="service"]').change(
      function() {
        if ($(this).val() == 'Business' && self.attr("data-class") == 'False') {
          $('#total').text('Not Eligible')
        }
        else{
          $('#total').text('Eligible')
        }
      }
    ).change()
  }).change()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control countries">
  <option value="AUSTRALIA" data-class="False" data-tx_1="63">AUSTRALIA</option>
  <option value="USA" data-class="True" data-tx_1="65">USA</option>
  <option value="GERMANY" data-class="True" data-tx_1="69">GERMANY</option>
</select>

<input type="radio" name="service" value="Economy" required id="id_service_0" />
<input type="radio" name="service" value="Business" required id="id_service_1" />
<input type="radio" name="service" value="First" required id="id_service_2" />

<p>Total Price is <span id="total"></span></p>

Answer 2

有2个单独的更改活动
检查值并进行比较

$(document).ready(function() {
  $('.countries').change(function() {
    var self = $(this).find('option:selected');
    var inputvalue = $('input:radio[name="service"]:checked').val();
    if (inputvalue == 'Business' && self.attr("data-class") == 'False') {
      $('#total').text('Not Eligible')
    } else {
      $('#total').text('Eligible')
    }
  }).change()
  $('input:radio[name="service"]').change(function() {
    var self = $('.countries').find('option:selected');
    var inputvalue = $('input:radio[name="service"]:checked').val();
    if (inputvalue == 'Business' && self.attr("data-class") == 'False') {
      $('#total').text('Not Eligible')
    } else {
      $('#total').text('Eligible')
    }
  }).change()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control countries">
  <option value="AUSTRALIA" data-class="False" data-tx_1="63">AUSTRALIA</option>
  <option value="USA" data-class="True" data-tx_1="65">USA</option>
  <option value="GERMANY" data-class="True" data-tx_1="69">GERMANY</option>
</select>

<input type="radio" name="service" value="Economy" required id="id_service_0" />Economy
<input type="radio" name="service" value="Business" required id="id_service_1" />Business
<input type="radio" name="service" value="First" required id="id_service_2" />First

<p>Total Price is <span id="total"></span></p>

如何根据选择ID和广播名称更改文本

2 个答案: