禁用属性和html

Question

这似乎是一件相当简单的事情，但是很长一段时间以来，这个问题一直困扰着我。 当选择列表值为“选择”时，我有一个“禁用”的提交按钮。 我想要的是html（'select a area'）...但是该按钮被禁用了。 这是代码：

<script>
//setting the variable for first-shown select value
var selVar = $('#areaSel').val();
//disabling submit if first-shown value is 'select'
if(selVar == 'select'){
    $('#areaSubmit').prop('disabled',true);
}
//setting the variable if the selection changed & disabling submit if = 'select'
$('#areaSel').change(function(){
    var selVar = $('#areaSel').val();
    if(selVar == 'select'){
       $('#areaSubmit').prop('disabled',true);
    //removing 'disabled' submit if selection !== select
    }else{
        $('#areaSubmit').prop('disabled',false);
    }
});
    //giving the message to 'select an area
$('#areaSubmit').click(function(){
    var selVar = $('#areaSel').val();
    if(selVar == 'select'){
    $('#areaE').html('select an area');
    }
});
</script>

我只是想让消息“选择区域”出现，而不是在单击时提交。 问题是当选择“选择”时按钮被禁用。 先谢谢您的帮助！

Answer 1

虽然禁用了提交按钮，但不会触发click事件；因此，标记的html不会更改。 将代码相对于将“ areaE”的内容更改到其他位置，这可能是您选择的更改事件

http://jsfiddle.net/QFWYE/1/

var selVar = $('#areaSel').val();
//disabling submit if first-shown value is 'select'
if(selVar == 'select'){
    $('#areaSubmit').prop('disabled',true);
}
//setting the variable if the selection changed & disabling submit if = 'select'
$('#areaSel').change(function(){
    var selVar = $('#areaSel').val();
    if(selVar == 'select'){
       $('#areaSubmit').prop('disabled',true);
         $('#areaE').html('select an area'); 
    //removing 'disabled' submit if selection !== select
    }else{
        $('#areaSubmit').prop('disabled',false);
         $('#areaE').html(''); 
    }
});
    //giving the message to 'select an area
$('#areaSubmit').click(function(){
    var selVar = $('#areaSel').val();
});

Answer 2

到这里，我相信这就是您的追求。

//giving the message to 'select an area
$('#areaSubmit').click(function(event){
    event.preventDefault();
    selVar = $('#areaSel').val();
    if(selVar == 'select'){
    $('#areaE').html('select an area');
    }else{$('#form').submit();
    }
});