从下拉列表中选择项目时启用按钮

时间:2014-11-28 11:12:26

标签: jquery ajax kendo-ui

我有一个带有下拉列表和按钮的表单

 <button id="primaryTextButton" class="k-primary delete-button">Submit</button>

我想只在从列表中选择一个项目时启用按钮。

我该怎么做?

JSFiddle Demo

2 个答案:

答案 0 :(得分:1)

这是您完整的Jquery代码: -

(function () {
$('#primaryTextButton').prop('disabled',true);   //disable button on page load
    var viewModel = kendo.observable({
        allowCustomValues: false,
        testData: new kendo.data.DataSource({
            data: [{
                id: 1,
                name: 'Apple'
            }, {
                id: 2,
                name: 'Banana'
            }, {
                id: 3,
                name: 'Orange'
            }, {
                id: 4,
                name: 'Kiwi'
            }]
        })
    });

    $('.combobox').kendoComboBox({
        dataSource: viewModel.testData,
        autoBind: false,
        dataTextField: 'name',
        dataValueField: 'id',
        suggest: true,
        placeholder: 'Select a Fruit',
        change: function (e) {
            $('#primaryTextButton').prop('disabled',false);   //enable button here
            var cmb = this;
            // selectedIndex of -1 indicates custom value
            if (cmb.selectedIndex < 0 && !viewModel.allowCustomValues) {
                cmb.value(null); // or set to the first item in combobox
            }
        }
    });

    kendo.bind('#example', viewModel);


})();

Fiddle.

答案 1 :(得分:0)

启用和禁用按钮可以在&#34;更改&#34;组合框本身的事件。考虑到该按钮在开始时被禁用:

$('.combobox').kendoComboBox({
    change: selectionChanged,
    // other properties of combo-box
});


function selectionChanged(e){
            if(this.value() != null || this.value() != ""){
              $('#button').prop('disabled',false);
            }
            else{
            $('#button').prop('disabled',true);  
            }
          }

希望这有帮助。

相关问题