当字段 jml_automatic 低于 id_km 字段时，在 jquery 中启用或禁用提交按钮

Question

我上个月刚刚学习了 jquery，现在我尝试使用 jquery 处理一个表单，以允许用户输入 gas 请求。但是脚本无法将#jml_km 中的值与#id_km 进行比较，并且当比较中的值为真时，提交按钮仍未禁用

    <strike>
    <form class="form-horizontal" role="form" action="<?php echo $action; ?>" method="post" id="form">
    
                <div class="form-group">
                    <label class="col-xs-8 col-sm-3" for="id_tipe">Tipe Aset</label>
                    <div class="col-xs-8 col-sm-3">
                        <?php echo form_dropdown('field[id_tipe]', $list_tipe,$id_tipe, 'id="id_tipe"    class="form-control" required'); ?>    
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-8 col-sm-3" for="id_km">Kilometer</label>
                    <div class="col-xs-8 col-sm-3">
                        <?php echo form_dropdown('field[id_km]', $list_kilometer,$id_km, 'id="id_km" class="form-control" required'); ?>    
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-8 col-sm-3" for="km_sebelumnya">Kilometer Sebelumnya</label>
                    <div class="col-xs-8 col-sm-3">
                        <input type="text" placeholder="Kilometer Sebelumnya" id="km_sebelumnya" name="field[km_sebelumnya]" class="form-control" value="<?=$km_sebelumnya?>" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-8 col-sm-3" for="km_pengajuan">Kilometer Pengajuan</label>
                    <div class="col-xs-8 col-sm-3">
                        <input type="text" placeholder="Kilometer Pengajuan" id="km_pengajuan" name="field[km_pengajuan]" class="form-control" value="<?=$km_pengajuan?>" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-8 col-sm-3" for="jml_km">Jumlah Kilometer</label>
                    <div class="col-xs-8 col-sm-3">
                        <input type="text" placeholder="Jumlah Kilometer" id="jml_km" name="field[jml_km]" class="form-control" value="<?=$jml_km?>" readonly >
                    </div>
                </div>
                <div class="form-group">
                    <label class="<?php echo COL_FORM_LABEL;?>"></label>
                    <div class="<?php echo COL_FORM_INPUT;?>">
                        <button class="btn btn-info" type="submit" id="btn_submit">Simpan</button>
                        <button class="btn btn-default" type="button" id="btnClear">Hapus</button>
                        <button class="btn btn-danger" type="button" id="btn_back">Kembali</button>
                    </div>
                </div>

        $(document).ready(function() {
            $("#km_sebelumnya, #km_pengajuan").keyup(function() {
                var km_sebelumnya  = $("#km_sebelumnya").val();
                var km_pengajuan = $("#km_pengajuan").val();
    
                var jml_km = parseInt(km_pengajuan) - parseInt(km_sebelumnya);
                $("#jml_km").val(jml_km);
            });
        });
    
            $(document).on('change', '#jml_km', function(){
            $('#btn_submit').prop('disabled',true);
                var idKm = parseInt($('#id_km').val());
                var jmlKm = parseInt($(this).val());
                    if ($(this).val() >= $('#id_km').val() ) {
                        $('#btn_submit').prop('disabled', false);
                    } else {
                        $('#btn_submit').prop('disabled', true);
                    }
                });

问题是当比较结果为真时提交按钮仍然没有禁用，请帮助

Answer 1

这段代码的输出if ($(this).val() >= $('#id_km').val() ) 使 5>32，它是第一个数字之间的比较，而不是它们的值之间的比较 , 修复它使用 if (Number($(this).val()) >= Number($('#id_km').val()) )

Answer 2

你可以试试下面的脚本，它正在工作。

    if ($(this).val() >= $('#id_km').val() ) 
    {
         $('#btn_submit').removeAttr("disabled", "disabled");
         $('#btn_submit').css("cursor", "pointer");
    } 
    else {
          $('#btn_submit').attr("disabled", "disabled");
          $('#btn_submit').css("cursor", "not-allowed");
    }