Geek Answers Handbook

How to disable and enable parameter with jquery?

I have 4 elements in my form. When the user selects one element in any of the options, I want this element to be disabled in every other select element. My problem arises when I select all the elements of an option because it disables everything. How can I enable / disable elements when they are selected / deselected?

Jsfiddle

First referee: <select class="d1">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>
Second referee: <select class="d2">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>

Third referee: <select class="d3">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>
Fourth referee:<select class="d4">
  <option>One</option>  
  <option>Two</option> 
  <option>Three</option> 
  <option>Four</option> 
  <option>Five</option>  
  <option>Six</option> 
</select>


$(document).ready(function () {

    $('.d1, .d2, .d3, .d4').change(function () {
        var V1 = $('.d1').find(":selected").text();
        var V2 = $('.d2').find(":selected").text();
        var V3 = $('.d3').find(":selected").text();
        var V4 = $('.d4').find(":selected").text();

        $('.d1, .d2, .d3, .d4').children().each(function (index, element) {
            if ($(element).text() == V1 ) {
                $(this).prop('disabled', true);
            }
            if ($(element).text() == V2) {
                $(this).prop('disabled', true);
            }
            if ($(element).text() == V3) {
                $(this).prop('disabled', true);
            }
            if ($(element).text() == V4) {
                $(this).prop('disabled', true);
            }


        });
    });

});
+4
source share
8 answers

You can try the following as a quick fix

$(document).ready(function () {

$('.d1, .d2, .d3, .d4').change(function () {
    var V1 = $('.d1').find(":selected").text();
    var V2 = $('.d2').find(":selected").text();
    var V3 = $('.d3').find(":selected").text();
    var V4 = $('.d4').find(":selected").text();

    $('select option').prop('disabled',false); // reset everything

    $('.d1, .d2, .d3, .d4').children().each(function (index, element) {
        if ($(element).text() == V1) {
            $(this).prop('disabled', true);
        }
        if ($(element).text() == V2) {
            $(this).prop('disabled', true);
        }
        if ($(element).text() == V3) {
            $(this).prop('disabled', true);
        }
        if ($(element).text() == V4) {
            $(this).prop('disabled', true);
        }

    });
  });
});

Demo

+3
source

If your selection list is the same, you can set to disable their index:

$(document).ready(function () {

    var $select = $('.d1, .d2, .d3, .d4').change(function () {
        $select.find('option').prop('disabled', false); //All option enabled
        $select.each(function(){
            var $this = $(this), index = $this.find(':selected').index(); //Get the index
            $select.not(this).find('option:nth-child('+ (index+1) +')').prop('disabled', true); //Select option base on their position and disable them


        })
    });

});

Fiddle: http://jsfiddle.net/u6eCL/16/

Otherwise, here is code based on the text:

$(document).ready(function () {

    var $select = $('.d1, .d2, .d3, .d4').change(function () {
        $select.find('option').prop('disabled', false); //All option enabled
        $select.each(function(){
            var $this = $(this), text = $this.find(':selected').text(); //Get the text
            $select.not(this).find('option').filter(function(){
                return $(this).text() === text
            }).prop('disabled', true); //Select option base on their text and disable them


        })
    });

});

http://jsfiddle.net/u6eCL/15/

+2

disabled false <option> . <select> <option> sibling <select>, this.value :

var $select = $('.d1, .d2, .d3, .d4');

$select.on('change', function() {

    $select.find('option').prop('disabled', false);

    $select.each(function() {
        $(this).siblings('select').find('option')
               .filter('[value="' + this.value + '"]').prop('disabled', true);
    });

});

+1

:

        $(this).attr('disabled', 'disabled');


        $(this).prop('disabled', true);
0

, . .

ref_select , value

$(function () {
    var $ref_select = $('.ref_select');
    /* cache option html */
    var optHtml = $ref_select.first().html();

    $ref_select.on('change', function () {
        /* make array of all selected values*/
        var selecteds=$ref_select.find('option:selected').map(function(){               
               return this.value                
        }).get();
        /* rebuild the other select elements*/
        $ref_select.not(this).each(function(){
            var selVal=this.value || '';
            /* create new set of options with filtered values*/ 
            var $opts=$(optHtml).filter(function(){
                return $.inArray(this.value,selecteds) ==-1 ||  this.value ==selVal
            });
            /* replace children*/
           $(this).html($opts).val(selVal);

        });
    });
});

DEMO

0

script. , "" , , , .

, , .

jsFiddle

$(document).ready(function () {

    var origIndex;

    $('.d1, .d2, .d3, .d4').focus(function() {
        origIndex = $(this).find(":selected").index();
    }).change(function () {
        var index = $(this).find(":selected").index();

        $('.d1, .d2, .d3, .d4').each(function() {
            $(this).children().eq(index).prop("disabled", true);
            $(this).children().eq(origIndex).prop("disabled", false);
        });

    });

});
0

( ), , ;) , select input by .

HTML

First referee:
<select name="d1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <!-- and so on -->
</select>

Second referee:
<select name="d2">
    <!-- same options here -->
</select>

<!-- even more dropdowns here -->

Javascript

"" - , .

$('select[name^="d"]').focus(function(){
    // Store the current value in the data attribute, for use later (whenever it actually changed)
    $(this).data('previouslySelected', $(this).val());
}).change(function () {
    // Grab current (new) and old value (see focus event)
    var currentValue = $(this).val();
    var oldValue = $(this).data('previouslySelected');

    // Select all select inputs, but NOT the current one
    $('select[name^="d"]').not(this).each(function(i, e) {
        // disable currently selected
        var opt = $('option[value="' + currentValue + '"]', this).prop('disabled', true);
        // re-enable previously selected item
        $('option[value="' + oldValue + '"]', this).prop('disabled', false);
    });
});

, , ;)

0

, ,

$(document).ready(function () {

    $('.d1, .d2, .d3, .d4').change(function () {
        var V1 = $('.d1').find(":selected").text();
        var V2 = $('.d2').find(":selected").text();
        var V3 = $('.d3').find(":selected").text();
        var V4 = $('.d4').find(":selected").text();

        $('.d1, .d2, .d3, .d4').children().each(function (index, element) {
            if ($(element).text() == V1 ) {
                $(this).prop('disabled', true).siblings().removeAttr('disabled');;
            }
            if ($(element).text() == V2) {
                $(this).prop('disabled', true).siblings().removeAttr('disabled');;
            }
            if ($(element).text() == V3) {
                $(this).prop('disabled', true).siblings().removeAttr('disabled');;
            }
            if ($(element).text() == V4) {
                $(this).prop('disabled', true).siblings().removeAttr('disabled');;
            }


        });
    });

});
0

More articles:


All Articles