禁用按钮提交，直到选择了下拉列表

Question

在这里，我有下拉列表和按钮提交。 用户选择下拉列表前如何禁用按钮提交？ 如果用户选择了下拉列表之一，则该按钮可以单击。 下面是我的代码。

落下

validate();
$('input,select').change(validate);
$("#dropdown").kendoDropDownList({
    optionLabel: "- Select Position -",
    dataTextField: "functionName",
    dataValueField: "hrsPositionID",
    dataSource: {
    transport:{
        read: {
        url:  "./testjson.php",
        type: "POST",
        data: function() {
                return { 
                    method: "getDropdown",
                }
            }
        },
    },
    },
    change: function(e){
        console.log(this.value());
        // $('#AccountingTree').data('kendoTreeView').homogeneous.read();
        homogeneous1.read();
        homogeneous2.read();
        homogeneous3.read();
        homogeneous4.read();
        homogeneous5.read();
        homogeneous6.read();
        homogeneous7.read();
        homogeneous8.read();
        homogeneous9.read();
        homogeneous10.read();
        homogeneous11.read();
        homogeneous12.read();
        homogeneous13.read();
        homogeneous14.read();
    }
}).data('kendoDropDownList');
dropdownlist = $("#dropdown").data("kendoDropDownList");

HTML按钮提交

<button id="primaryTextButton" type="button" value="submit"  class="k-primary" style="float:right; padding: 5px 20px; border-radius: 4px;">Submit</button>  

JavaScript提交按钮

//AJAX call for button
    $("#primaryTextButton").kendoButton();
    var button = $("#primaryTextButton").data("kendoButton");
    button.bind("click", function(e) {

    var test = $("#dropdown").val()

    $.ajax({
        url: "../DesignationProgramTemplate/testing.php",
        type: "post",
            data: {'id':test,'progid':array},
                success: function (respond) {
                // you will get response from your php page (what you echo or print)                 
                //kendo.alert('Success'); // alert notification
                if(respond === "SUCCESS")
                {
                    kendo.alert("Data saved"); 
                }else
                {   
                    kendo.confirm("Update the data?")
                    .done(function(){
                        $.ajax({
                        type: "POST",
                        url: "del.php",
                        data: {'id':test,'progid':array},
                        success: function(){
                            kendo.alert("Data updated");
                        }
                    });
                    });
                }   
                },
        });
    });
function validate(e){
    var validation = true;
        $('input , select').each(function(){ 
        ($(this).val().length>0)
        { validation = false;}
        });   
    if ( validation ) {
    $('#primaryTextButton').prop('disabled', true);
    } else {
    $('#primaryTextButton').prop('disabled', false);
    }
}

我已经使用了validate（e）函数，但是在我的javaScript中不起作用。 我的代码中是否有更正？ 或其他意见来解决吗？

Answer 1

如果您已经在使用jquery，为什么不将动作侦听器绑定到dropdownlist，请获取dropdownlist的值并检查是否已选择。 但是首先将按钮禁用，然后如果下拉列表更改使按钮启用，如下所示：

$("#primaryTextButton").prop('disabled', true);
$("#dropdown").on("change", function(){
    $("#primaryTextButton").prop('disabled', false);
})

您可以再进行一次操作，例如检查所选项目是否已恢复为默认值，并再次禁用按钮。 希望这可以帮助

Answer 2

should应该使用以下逻辑：

 const $dropdown = $('#dropdown') const $primaryTextButton = $('#primaryTextButton') $dropdown.on('change', function() { $primaryTextButton.prop('disabled', false) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="dropdown"> <option disabled hidden selected>Select option</option> <option value="foo">foo</option> <option value="bar">bar</option> </select> <button disabled id="primaryTextButton" type="button" value="submit" class="k-primary" style="float:right; padding: 5px 20px; border-radius: 4px;">Submit</button>