Question

我正在尝试为html5表单实现一个javascript代码，该代码将负责禁用/启用按钮，直到未选择select元素。这是代码：

HTML：

<form name="courseForm" id="courseForm">
    <select name="coursetype" id="coursetype" onchange="enableStartBtn()">
        <option value="0" selected="selected">Select here...</option>
        <option value="1">CourseName 1</option>
        <option value="2">CourseName 2</option>
        <option value="3">CourseName 3</option>
    </select>
<button type="button" id="startBtn" disabled="disabled" onclick="Test()">Start</button>
</form>

和 JavaScript ：

function enableStartBtn() {
    $('#startBtn').removeAttr('disabled');
}

function Test() {
    var form = $('#courseForm');
    var course = $('#coursetype', form).val();
    if (course == '0') {
        alert('Select the course first!');
    } else if (course == '1') {
        alert('CourseName 1 is selected!');
    } else if (course == '2') {
        alert('CourseName 2 is selected!');
    } else if (course == '3') {
        alert('This course is not implemented yet');
    }
}

我在我的代码中使用 JQuery 1.9.1 ，一切看起来都不错，但是选择了when值时按钮不启用。任何帮助将不胜感激。

更新：抱歉，有人忘了提到我还在使用 JQuery Mobile 1.3.0 ，所以不包括jquery mobile它可以工作，但jquery mobile不行。这是jsfiddle版本：http://jsfiddle.net/dozent/UVQ4m/

Answer 1

<form name="courseForm" id="courseForm">
    <select name="coursetype" id="coursetype">
        <option value="0" disabled>Select here...</option>
        <option value="1">CourseName 1</option>
        <option value="2">CourseName 2</option>
        <option value="3">CourseName 3</option>
    </select>
    <button type="button" id="startBtn" disabled>Start</button>
</form>

并做：

var courses = ['1','2']; // available courses

$('#coursetype').one('change', function() {
     $('#startBtn').prop('disabled', false);
});

$('#startBtn').on('click', function() {
    var val = $('#coursetype').val(),
        msg = $.inArray(val, courses) != -1 ? 'CourseName '+val+' is selected!' : 'This course is not implemented yet';
    alert(msg);
});

FIDDLE

Answer 2

使用prop()

function enableStartBtn() {
   $('#startBtn').prop('disabled',false); //<----to remove  disable attr of the button
}

您需要在此处更改按钮的属性，而不仅仅是删除属性

Answer 3

包含在标题区域

不是这个= $（'＃coursetype'）。one（'change'，function（）{
它应该= $（'＃coursetype'）。on（'change'，function（）{

JavaScript：禁用<button>直到选择值</button>

3 个答案:

JavaScript：禁用<button>直到选择值</b​​utton>

3 个答案:

JavaScript：禁用<button>直到选择值</button>