Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/409.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
JavaScript:禁用<;按钮>;直到选择值为止_Javascript_Jquery_Html_Button_Selection - Fatal编程技术网

JavaScript:禁用<;按钮>;直到选择值为止

JavaScript:禁用<;按钮>;直到选择值为止,javascript,jquery,html,button,selection,Javascript,Jquery,Html,Button,Selection,我正在尝试为html5表单实现一个javascript代码,该代码将负责禁用/启用按钮,直到选择元素未被选中。代码如下: HTML: <form name="courseForm" id="courseForm"> <select name="coursetype" id="coursetype" onchange="enableStartBtn()"> <option value="0" selected="selected">Sel

我正在尝试为html5表单实现一个javascript代码,该代码将负责禁用/启用按钮,直到选择元素未被选中。代码如下:

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>
我在代码中使用的是jquery1.9.1,看起来一切正常,但当选择值时,按钮不启用。任何帮助都将不胜感激

更新:很抱歉,伙计们忘了提到我也在使用JQuery Mobile 1.3.0,因此不包括JQuery Mobile,它就可以工作,但使用JQuery Mobile则不行。 以下是JSFIDLE版本:

使用

function enableStartBtn(){
$('startBtn').prop('disabled',false)//

包括在标题区域中

  • 不是this=$('#coursetype')。one('change',function(){
  • 它应该=$('#coursetype')。在('change',function()上{

  • 使用
    .prop('disabled',false)
    启用它对我来说很好,尽管我同意你应该使用
    prop
    来启用它。你也可以将“disabled”添加到标记中,这样用户就不能重新选择它:
    如果你试图将其禁用(基于所选项目),您可以使用:。它使用一个特殊的
    data-*
    属性来针对未实施的课程,而不是将其存储在JS@lan请看一下我问题的
    update
    部分。很好。尽管在“未实现”上添加一个特殊的
    data-*
    属性可能是有意义的当然。还有,你为什么使用
    .one()
    ?为什么使用
    .one()
    ?根据课程可用性启用/禁用按钮不是更好吗?一旦更改了选择,按钮将启用,并且您无法再次选择第一个选项,因此无需多次执行事件处理程序。但是如果课程不可用,我不希望启用按钮。如果用户选择课程3。我想这是一个UI问题。@DerekHenderson-我可能也会这样做,但是你不需要按钮,你可以在更改事件中完成所有操作,因为如果在课程不可用时禁用按钮,则不需要按钮来告诉你课程是否可用?无论如何,question是为了在第一次更改select时启用按钮,而让事件处理程序运行一次以上是不必要的!
    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');
        }
    }
    
    function enableStartBtn() {
       $('#startBtn').prop('disabled',false); //<----to remove  disable attr of the button
    }
    
    <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);
    });