单选按钮下拉弹出窗口费清关

Question

我有两个单选按钮。当您单击第一个单选按钮（是）时，它有一个下拉菜单，打开一个弹出窗口，允许您添加一个盘子。如果用户接受了一个牌照，那么用户就无法改变主意并点击“否”以取消费用。

用户可以更换盘子和费用的变化很好，但我坚持的部分是如果用户决定他们不想要盘子并且他们点击单选按钮（否）它不会删除费用。

我已将其设置为清除下拉选项但不执行费用部分。有人可以帮忙吗？

此外，我添加了复选框，因为我不希望它完全清除所有费用，只有下拉选项中的费用。

如果有人有任何建议或意见，我们将不胜感激！

http://jsfiddle.net/e1ewx5jv/

＆＃13;

＆＃13;

var specialFee = 0;

$(function(){   //added by me
        $('#IRF').click(function(){   
           calculateTotal();   
        });
    });


function initialRegFee()
{
    var initialFee=0;
    var theForm = document.forms["form"];
    var iRF = document.getElementById('IRF');
    if(iRF.checked==true)
    {
        initialFee=225;
    }
    return initialFee;
}

function calculateTotal()
{

    var titleFees = initialRegFee();
    titleFees += specialFee;
    

    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

$(function() {
        $('#SPECIAL').on('change', function() {
            if ($('option:selected', this).is('[data-img]')) {
                
                $('#modal_special').find('.modal-title').html($('option:selected', this).data('name'));
                $('#modal_special').find('.modal-body').html('')
				.append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/><br/><br/>                 Would you like to add this license plate for: $' + $('option:selected', this).data('price') + ' ?')
                .end().modal('show');
            }
        });
                
        $('.accept').on('click',function() {
            specialFee = $('option:selected').data('price');
            calculateTotal();
            $('#modal_special').modal('hide');
        });
    });

function showhideSPForm(SP) {
    if (SP == "Yes") {
        document.getElementById("div8").style.display = 'block';
        document.getElementById("div9").style.display = 'none';
    } else if (SP == "No") {
        document.getElementById("div9").style.display = 'block';
        document.getElementById("div8").style.display = 'none';
		document.getElementById("SPECIAL").selectedIndex = 0;
    }
    calculateTotal();

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="form">
Check if
<input 
  type="checkbox" 
  id="IRF" 
  name='IRF' 
  />

<input type="radio" value="Yes" name="SP" id="SP" required="yes" onclick="showhideSPForm(this.value)"/><label for="SP">Yes</label>

&nbsp;&nbsp;&nbsp;<input type="radio" value="No" name="SP" id="noSP" onclick="showhideSPForm(this.value)"/><label for="noSP">No</label>

   <div id="div8" style="display:none">
<div class="clearfix"> 
    <select name="SPECIAL" id="SPECIAL">
  <option>Please Select</option>
    <option 
      data-name="Animal Friend" 
      data-img="/images/img/AnimalFriend.png" 
      data-price="30" 
      value="1">Animal Friend</option>
   <option 
      data-name="Aquaculture" 
      data-img="/images/img/Aquaculture.png" 
      data-price="25" 
      value="2">Aquaculture</option>
   <option 
      data-name="Protect Our Oceans" 
      data-img="/images/img/ProtectOurOceans.png" 
      data-price="20" 
      value="3">Protect Our Oceans</option>
</select>
    <!-- Modal -->
<div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Specialty Plate</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary accept">Accept</button>
      </div>
    </div>
  </div>
</div>
       </div>
    </div>
<div id="totalPrice"></div>
      
<div id="div9" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<div id="totalPrice"></div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我想，你没有将specialFee重置为0。

function showhideSPForm(SP) {
    if (SP == "Yes") {
        document.getElementById("div8").style.display = 'block';
        document.getElementById("div9").style.display = 'none';
    } else if (SP == "No") {
        document.getElementById("div9").style.display = 'block';
        document.getElementById("div8").style.display = 'none';
        document.getElementById("SPECIAL").selectedIndex = 0;
    }
    specialFee = 0;
    calculateTotal();
}