Try
jQuery(function(){
var $inputs = $('.inputFilter').on('input blur', function () {
var value = $.trim(this.value);
$inputs.not(this).prop('disabled', value.length != 0);
})
})
Demo: Fiddle
Frage
I have a table with several fields that act like filters. All fields have the same class and are empty by default.
Is there a way that I can only allow one of these fields at a time to be active and disable all others at the same time ? What I want to achieve is that you can only fill in one field at a time, i.e. if you fill in one field then the others get disabled and when you empty this field again the others get reactivated.
My thought was to add a temporary class while entering data but I couldn't get this to work.
My fields all look like this:
<input type="text" class="inputFilter" id="input1" name="input1" value="" />
Many thanks for any help with this, Tim.
Lösung
Try
jQuery(function(){
var $inputs = $('.inputFilter').on('input blur', function () {
var value = $.trim(this.value);
$inputs.not(this).prop('disabled', value.length != 0);
})
})
Demo: Fiddle
Andere Tipps
try this,
$('.inputFilter').change(function(){
if($(this).val() == "")
{
$('.inputFilter').removeProp('disabled');
}
else
{
$('.inputFilter').not($(this)).prop('disabled',true);
}
});
you may use jQuery .each() in a way that will suit your needs:
for HTML:
<input type="text" class="inputFilter" id="input1" name="input1" value="A" />
<input type="text" class="inputFilter" id="input2" name="input2" value="B" />
<input type="text" class="inputFilter" id="input3" name="input3" value="C" />
tweak the function for your needs:
function disableAllButX(x){
$.each( $('input[type=text]') , function( i, element ){
if(i!=x){
element.disabled=true;
} else {
element.disabled=false;
}
});
}
and call it via some trigger (i.e onclick or onchange):
disableAllButX(1);