CODEWITHSUNDEEP
jquery
osos
osos

Reputation: 2133

Disable input field when the same input chosen ?

I have an input field ( source languages ) which i want when i click on one of the source languages, the target language with the same text is disabled

I done that so far but it keep disable the target languages when i click the source language

what i want to reset that every time .. not to make always listen to event

here is the demo http://jsfiddle.net/ezNxU/

// change the target language according to the source language 
$('#source').change(function () {

var option_source = $('select#source option:selected').text();

$('select#target option').each(function () {
    if ($(this).text() == option_source) $(this).prop("disabled", true);
    console.log($(this).text());
});

});

Upvotes: 1

Views: 297

Answers (4)

adeneo
adeneo

Reputation: 318332

To reset the disabled property, apply it on all the options, and use a function call to set it to true / false

$('#source').on('change', function() {
    var self = this;
    $('#target option').prop('disabled', function() {
        return this.value == self.value;
    });
});

FIDDLE

Upvotes: 2

bipen
bipen

Reputation: 36551

just remove disable properties on change event...that will remove disable form all option and later yourcode will add it...

try this

 $('#source').change(function () {
   $('select#target option').prop("disabled", false); //<-- add this line
   .....

fiddle here

Upvotes: 0

Christophe Debove
Christophe Debove

Reputation: 6306

use this to clear all

$('select#target option').prop("disabled",false);

so for your code : Fiddle

 $('#source').change(function () {

            var option_source = $('select#source option:selected').text();
                $('select#target option').prop("disabled",false);
            $('select#target option').each(function () {

                if ($(this).text() == option_source) $(this).prop("disabled", true);
                console.log($(this).text());
            });
        });

Upvotes: 0

letiagoalves
letiagoalves

Reputation: 11302

Try this:

$('#source').change(function () {
    var option_source = $('select#source option:selected').text();
    $('select#target option').each(function () {
        $(this).prop("disabled", ($(this).text() == option_source));
    });
});

DEMO

Upvotes: 1

Related Questions