Question

我有一个小脚本允许我从选择中选择一个项目。当此项目列为Item时，表示我有关于此项目的费率信息。当所选项目列在Night时，这意味着我可以在费率信息之间，因为我没有关于此项目的任何信息。

JS控制我的表格：

$('select[name="BIL_Item_Quantity"], select[name="BIL_Item_Id"], input[name="BIL_Item_Rate"]').on('change keyup', function() {
    var parent = $(this).closest('div.modal-body');
    var type = parent.find('select[name="BIL_Item_Id"]').find(":selected").data('item-type');

    if(type == 'Night') {
        parent.find('input[name="BIL_Item_Rate"]').prop("readonly", false);
    }
    if(type == 'Item') {
        parent.find('input[name="BIL_Item_Rate"]').prop("readonly", true);
    }

    // Get datas
    var quantity = parent.find('select[name="BIL_Item_Quantity"]').val();
    var rate = Number.parseFloat(parent.find('select[name="BIL_Item_Id"]').find(":selected").data('item-rate')).toFixed(2);
    var taxes_id = parent.find('select[name="BIL_Item_Id"]').find(":selected").data('item-taxes');
    var taxes_amount = Number.parseFloat(parent.find('select[name="BIL_Item_Id"]').find(":selected").data('item-taxes-sum')).toFixed(3);

    // Calculs
    var total_rate = (quantity * rate).toFixed(2);

    // Display
    parent.find('input[name="BIL_Item_Rate"]').val(rate);
    parent.find('input[name="BIL_Item_Total_Rate"]').val(total_rate);
    parent.find('input[name="BIL_Item_Taxes"]').val(taxes_id);
    parent.find('input[name="BIL_Item_Type"]').val(type);
});

当我从选择中选择Night时，什么不起作用。我无法在输入BIL_Item_Rate中输入数字，也不会进行乘法。

当我开始输入输入BIL_Item_Rate时，每个按键都会删除内容。

你知道为什么请吗？

https://jsfiddle.net/azq028g7/

感谢您的帮助。

Answer 1

在代码末尾，您将根据所选项目的data-item-rate设置费率 - 无论选择哪个下拉选项。请参阅下面的代码，我将其移至select的值的条件检查。

$('select[name="BIL_Item_Quantity"], select[name="BIL_Item_Id"], input[name="BIL_Item_Rate"]').on('change keyup', function() {
    var parent = $(this).closest('div.modal-body');
    var type = parent.find('select[name="BIL_Item_Id"]').find(":selected").data('item-type');

    if(type == 'Night') {
    	parent.find('input[name="BIL_Item_Rate"]').prop("readonly", false);
      var rate = Number.parseFloat(parent.find('input[name="BIL_Item_Rate"]').val()).toFixed(2);
    }
    if(type == 'Item') {
    	parent.find('input[name="BIL_Item_Rate"]').prop("readonly", true);
      var rate = Number.parseFloat(parent.find('select[name="BIL_Item_Id"]').find(":selected").data('item-rate')).toFixed(2);
    }

    // Get datas
    var quantity = parent.find('select[name="BIL_Item_Quantity"]').val();
    /* var rate moved to conditional, above */    
    var taxes_id = parent.find('select[name="BIL_Item_Id"]').find(":selected").data('item-taxes');
    var taxes_amount = Number.parseFloat(parent.find('select[name="BIL_Item_Id"]').find(":selected").data('item-taxes-sum')).toFixed(3);

    // Calculs
    var total_rate = (quantity * rate).toFixed(2);

    // Display
    parent.find('input[name="BIL_Item_Rate"]').val(rate);
    parent.find('input[name="BIL_Item_Total_Rate"]').val(total_rate);
    parent.find('input[name="BIL_Item_Taxes"]').val(taxes_id);
    parent.find('input[name="BIL_Item_Type"]').val(type);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
    <div class="form-group">
        <label class="col-sm-3">Bill an item</label>
        <div class="col-sm-9">
            <div class="col-sm-12">
                <select class="form-control" name="BIL_Item_Id">
                    <option value="">Select</option>
                    <option value="" data-item-rate="" data-item-taxes="7" data-item-taxes-sum="0" data-item-type="Night">Night</option>
                    <option value="17" data-item-rate="21.00" data-item-taxes="8,7" data-item-taxes-sum="0" data-item-type="Item">Breakfast</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3">Quantity</label>
        <div class="col-sm-9">
            <div class="col-sm-12">
                <select class="form-control" name="BIL_Item_Quantity">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3">Unit rate</label>
        <div class="col-sm-9">
            <div class="col-sm-12">
                <input type="number" class="form-control col-xs-2" name="BIL_Item_Rate" required="" readonly="">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3">Total</label>
        <div class="col-sm-9">
            <div class="col-sm-12">
                <input type="number" class="form-control" name="BIL_Item_Total_Rate" required="" readonly="">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <input type="hidden" class="form-control" name="BIL_Item_Taxes" value="">
            <input type="hidden" class="form-control" name="BIL_Item_Type" value="">
        </div>
    </div>
</div>

在选择更改时，删除readonly属性并允许用户键入输入

1 个答案: