jQuery prevent change for select

前端 未结 13 1284
無奈伤痛
無奈伤痛 2020-11-28 10:51

I want to prevent a select box from being changed if a certain condition applies. Doing this doesn\'t seem to work:

$(\'#my_select\').bind(\'change\', funct         


        
相关标签:
13条回答
  • 2020-11-28 11:20

    Another option to consider is disabling it when you do not want it to be able to be changed and enabling it:

    //When select should be disabled:
    {
        $('#my_select').attr('disabled', 'disabled');
    }
    
    //When select should not be disabled
    {
        $('#my_select').removeAttr('disabled');
    }
    

    Update since your comment (if I understand the functionality you want):

    $("#dropdown").change(function()
    {
        var answer = confirm("Are you sure you want to change your selection?")
        {
            if(answer)
            {
                //Update dropdown (Perform update logic)
            }
            else
            {
                //Allow Change (Do nothing - allow change)
            } 
        }            
    }); 
    

    Demo

    0 讨论(0)
  • 2020-11-28 11:24

    You might need to use the ".live" option in jQuery since the behavior will be evaluated in real-time based on the condition you've set.

    $('#my_select').live('change', function(ev) {
      if(my_condition)
      {
        ev.preventDefault();
        return false;
      }
    });
    
    0 讨论(0)
  • 2020-11-28 11:24

    Implement custom readonly like eventHandler

    <select id='country' data-changeable=false>
      <option selected value="INDIA">India</option>
      <option value="USA">United States</option>
      <option value="UK">United Kingdom</option>
    </select>
    
    <script>
        var lastSelected = $("#country option:selected");
    
        $("#country").on("change", function() {
           if(!$(this).data(changeable)) {
                lastSelected.attr("selected", true);              
           }        
        });
    
        $("#country").on("click", function() {
           lastSelected = $("#country option:selected");
        });
    </script>
    

    Demo : https://jsfiddle.net/0mvajuay/8/

    0 讨论(0)
  • 2020-11-28 11:25

    None of the answers worked well for me. The easy solution in my case was:

    $("#selectToNotAllow").focus(function(e) {
        $("#someOtherTextfield").focus();
    });
    

    This accomplishes clicking or tabbing to the select drop down and simply moves the focus to a different field (a nearby text input that was set to readonly) when attempting to focus on the select. May sound like silly trickery, but very effective.

    0 讨论(0)
  • 2020-11-28 11:30

    If you simply want to prevent interaction with the select altogether when my_condition is true, you could always just capture the mousedown event and do your event prevent there:

    var my_condition = true;
    
    $("#my_select").mousedown(function(e){
      if(my_condition)
      {
         e.preventDefault();
         alert("Because my_condition is true, you cannot make this change.");
      }
    });
    

    This will prevent any change event from ever occurring while my_condition is true.

    0 讨论(0)
  • 2020-11-28 11:31

    Try this:

    http://jsfiddle.net/qk2Pc/

    var my_condition = true;
    var lastSel = $("#my_select option:selected");
    
    $("#my_select").change(function(){
      if(my_condition)
      {
        lastSel.prop("selected", true);
      }
    });
    
    $("#my_select").click(function(){
        lastSel = $("#my_select option:selected");
    });
    
    0 讨论(0)
提交回复
热议问题