时间戳

首页 > 解决方案 > 如何不允许输入字段值大于其他值

javascript - 如何不允许输入字段值大于其他值

问题描述

我有几个动态字段，其中有一些值，第一个字段是Total Amt，其他是一些动态字段，然后是另一个字段，Bal Amt最初与总量相反。

假设Total Amt=500然后Bal Amt=-500在我的动态字段中，有一个字段将始终存在，即tender Cash

所以我想做的是

Tender cash可以更大，Total Amount例如如果总金额 = 500，则投标现金可以为 550，然后 Bal Amt 自动为 +50

但是当 Total bal 为 0 时，我希望他们限制其他几个字段，那么它不应该接受输入或警报或控制台

就像如果Total Amt=500 tender cash=500 || 550那么所有其他人都不会接受任何输入

如果Total Amt=500 tender cash 50那么其他人可以接受输入，直到bal Amt=0bal Amt=0 其他人不应该接受输入。

我正在使用计算属性进行计算，我不知道如何做上述事情。

代码

new Vue({
  el: '#app',
  data() {
    return {
      totalAmt: 500,
      paymentMode: [{
        "PAYMENTCODE": "TC",
        "PAYMENTNAME": "Tender Cash"
      }, {
        "PAYMENTCODE": "CC",
        "PAYMENTNAME": "Credit Card"
      }, {
        "PAYMENTCODE": "Cp",
        "PAYMENTNAME": "Coupn"
      }, {
        "PAYMENTCODE": "ptm",
        "PAYMENTNAME": "PayTM"
      }, {
        "PAYMENTCODE": "Cr",
        "PAYMENTNAME": "Credit"
      }, {
        "PAYMENTCODE": "SW",
        "PAYMENTNAME": "Swiggy"
      }, {
        "PAYMENTCODE": "BB",
        "PAYMENTNAME": "uber Eats"
      }, {
        "PAYMENTCODE": "WE",
        "PAYMENTNAME": "Zomato"
      }]
    }
  },
  computed: {
    balAmt() {
      // sum of inputs of paymentMode
      const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0);
      return sum - this.totalAmt;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <label>Total Amt</label>
    <input type="text" v-model="totalAmt">
  </div>
  <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
    <label>{{mode.PAYMENTNAME}}</label>
    <input type="text" v-model="mode.Amount">
  </div>
  <div>
    <label>Bal Amt</label>
    <input type="text" :value="balAmt">
  </div>
</div>

我只需要用 Vue.js 来做这件事

检查此图像

标签： javascriptvue.js

解决方案

你可以做这样的事情 -

我用过:disabled 

<input type="text" v-model="mode.Amount" :disabled="balAmt>=0 && mode.PAYMENTCODE!='TC'">


new Vue({
  el: '#app',
  data() {
    return {
      totalAmt: 500,
      paymentMode: [{
        "PAYMENTCODE": "TC",
        "PAYMENTNAME": "Tender Cash"
      }, {
        "PAYMENTCODE": "CC",
        "PAYMENTNAME": "Credit Card"
      }, {
        "PAYMENTCODE": "Cp",
        "PAYMENTNAME": "Coupn"
      }, {
        "PAYMENTCODE": "ptm",
        "PAYMENTNAME": "PayTM"
      }, {
        "PAYMENTCODE": "Cr",
        "PAYMENTNAME": "Credit"
      }, {
        "PAYMENTCODE": "SW",
        "PAYMENTNAME": "Swiggy"
      }, {
        "PAYMENTCODE": "BB",
        "PAYMENTNAME": "uber Eats"
      }, {
        "PAYMENTCODE": "WE",
        "PAYMENTNAME": "Zomato"
      }]
    }
  },
  computed: {
    balAmt() {
      // sum of inputs of paymentMode
      const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0);
      return sum - this.totalAmt;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <label>Total Amt</label>
    <input type="text" v-model="totalAmt">
  </div>
  <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
    <label>{{mode.PAYMENTNAME}}</label>
    <input type="text" v-model="mode.Amount" :disabled="balAmt>=0 && mode.PAYMENTCODE!='TC'">
  </div>
  <div>
    <label>Bal Amt</label>
    <input type="text" :value="balAmt">
  </div>
</div>

推荐阅读