基于选择更改或输入条目的JQuery启用和禁用

时间:2014-08-12 13:39:33

标签: javascript jquery html css

我已经有一个JQ需要从第一个下拉列表中进行选择才能单击“保存”。如果你看一下这个例子,你会看到我有一个可选的Add Task。

我不能让某人选择任务类型然后忘记截止日期或在截止日期输入并忘记任务类型。由于其他各种原因,php端验证不起作用,所以我想知道如果只有两个中的一个有内容,是否有一个简单的JQuery来禁用Save。

(P.S。 - 如果你得到角色参考,请告诉我):)

JSFiddle

HTML:

<form class="form-horizontal" role="form" method="POST">

    <h4>Create New Note</h4>

    <div>
    <select class="form-control" id="fdispositionid" name="fdispositionid">
        <option value="0"></option>
        <option value="4">Set Appointment</option>
        <option value="8">Sent Email</option>
        <option value="7">Left Voicemail</option>
    </select>
    </div>

    <div>
    <textarea class="form-control" name="fnotes" id="fnotes" rows="5"></textarea>
    </div>

    <h4>Create New Task <small>(optional)</small></h4>

    <div>
    <select class="form-control" name="fassignedto" id="fassignedto">
        <option value=0></option>
        <option value=1 selected>Shawn Spencer</option>
        <option value=2>Burton Guster</option>
    </select>
    </div>

    <div>
    <select class="form-control" name="ftasktypeid" id="ftasktypeid">
        <option value=0></option>
        <option value="6">Appointment</option>
        <option value="1">Call Back</option>
        <option value="5">Campaign</option>
    </select>
    </div>

    <div>
    <input type="text" name="fduedate2" id="fduedate2" class="form-control" placeholder="Enter Date" />
    </div>

    <div>
    <button type="button" class="btn btn-success" id="notesave" name="notesave" onclick="return fnsavenote();" disabled> Save Note</button>
    </div>
</form>

JS:

$('#fdispositionid').change(function(){
    var selected = $(this).val();
    if(selected == '0'){
      $('#notesave').attr("disabled", "disabled");
    }
    else{
      $('#notesave').removeAttr("disabled");
    }
});

1 个答案:

答案 0 :(得分:2)

您可以检查duedate在ifcase中是否有任何值,如此

$('#fdispositionid,#fduedate2').on('change keyup',function(){
    var selected = $('#fdispositionid').val();
    var date=$('#fduedate2').val();
    if(selected == '0' || date==""){
      $('#notesave').prop("disabled", true);
    }
    else{
      $('#notesave').prop("disabled",false);
    }
});

注意:使用.prop()作为属性值

DEMO