Input form disable when one is select

Question

I have an simple form. 2 inputs and 3 radio buttons.

I need to make something like this:

• When I click in first input (and START typing) second input and radio`s get disabled and when I click in Radio inputs are disabled. And so one.

My form:

 <form method="get">
                <div class="singleTableForm">
                    <label style="width: 95px; line-height: 25px;">Who:</label>
                    <div style="float:left;margin-right:10px;">
                        <input name="filter_task_who" value="{{ taskWho }}" id="filter_task_date" style="width: 60px;">
                    </div>
                    <label style="width: 90px; line-height: 25px;">Task ID:</label>
                    <div style="float:left;margin-right:10px;"> 
                        <input name="filter_task_id" value="{{ taskId }}" id="filter_task_date" style="width: 100px;">
                    </div>
                    <label style="width: 50px; line-height: 25px;">Priority:</label>
                    <div >
                <div style="float:left;"><input {% if filter_enabled=="Filtruj" and taskPriority==2%}checked="checked"{% endif %} style="float:left;margin-top: 5px;" type="radio" name="filter_task_priority" id="filter_task_date" value="2"><label style="width: 45px; line-height: 25px;">High</label></div>
                <div style="float:left;"><input {% if filter_enabled=="Filtruj" and taskPriority==1%}checked="checked"{% endif %} style="float:left;margin-top: 5px;" type="radio" name="filter_task_priority" id="filter_task_date" value="1"><label style="width: 45px; line-height: 25px;">Medium</label></div>
                <div style="float:left;"><input {% if taskPriority != null %}{% if filter_enabled=="Filtruj" and taskPriority==0%}checked="checked"{% endif %}{% endif %} style="float:left;margin-top: 5px;" type="radio" name="filter_task_priority" id="filter_task_date" value="0"><label style="width: 45px; line-height: 25px;">LOW</label></div>
                    </div>
                    <div style="float: left;width:90px; " >
                    <a style="float: left;margin-left: 2px;padding-left: 6px;padding-right: 6px;padding-top: 1px;padding-bottom: 1px;" type="submit" href="{{path('admin_tasks')}}" class="button">Reset</a>
                    <input style="float: left;" type="submit" name="filter_enabled" class="button" value="Filtruj" />
                </div>
                </div>


            </form>

Answer 1

Use the focus and focusout events and change the property of disabled to true or false:

$("#filter_task_date1").focus(function (){
    $("#filter_task_date2").prop('disabled', true);
    $("#filter_task_date3").prop('disabled', true);
    $("#filter_task_date4").prop('disabled', true);
    $("#filter_task_date5").prop('disabled', true);
});

I also changed your component ids with numbers at the end: http://jsfiddle.net/aqbp1e9o/

Answer 2

try as:

$('.form1').find(':input').prop('disabled', true);*/
$('.form2').fadeTo( "slow", 0.20 );