jQuery - disabilita il campo di input in base ad un altro campo selezionato valore

Question

Sto cercando un plugin jQuery che faccia questo.

ad esempio:

<label><input type="checkbox" depends_on="foo=5" name="boo" ... /> Check </label> 
<select name="foo" ... > 
    <option value="5" selected="selected">5</option> 
    <option value="15">15</option> 
    <option value="25">25</option> 
</select> 

cui la casella sarebbe attivato solo se l'opzione "5" è selezionata di seguito.

o

<select name="foo" depends_on="boo" ... > 
    <option value="5" selected="selected">5</option> 
    <option value="15">15</option> 
    <option value="25">25</option> 
</select> 

<label><input type="checkbox" name="boo" ... /> Check </label> 

In questo caso il selezionato deve abilitato solo se "boo" è selezionata.

sono riuscito a venire con un codice che fa qualcosa di simile:

$("*[depends_on]").each(function(){ 

    var source = $(this); 
    var dep = $(this).attr('depends_on'); 
    var target = dep.split("="); 

    $("*[name='"+target[0]+"']:not(:hidden)").change(function(){ 
    if($(this).attr('checked')) { 
    source.removeClass('disabled'); 
    source.removeAttr('disabled'); 
    } 
    else{ 
    source.attr('disabled', 'disabled'); 
    source.addClass('disabled'); 
    } 

    }).change(); 

}); 

sembra funzionare bene per seleziona che dipendono le radio, ma voglio implementare questo per qualsiasi tipo di ingresso o la combinazione (o almeno la maggior parte di essi), senza dover scrivere codice separato per ogni tipo di input.

in ogni caso, qualcuno è a conoscenza di tale plug-in? o forse hai suggerimenti per il mio codice sopra? :)

Answer 1

Qui si va :-)

http://jsfiddle.net/balupton/cxcmf/

---

(function($){ 
    /** 
    * jQuery.fn.dependsOn 
    * @version 1.0.1 
    * @date September 22, 2010 
    * @since 1.0.0, September 19, 2010 
    * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle} 
    * @author Benjamin "balupton" Lupton {@link http://www.balupton.com} 
    * @copyright (c) 2010 Benjamin Arthur Lupton {@link http://www.balupton.com} 
    * @license Attribution-ShareAlike 2.5 Generic {@link http://creativecommons.org/licenses/by-sa/2.5/ 
    */ 
    $.fn.dependsOn = function(source,value){ 
     var $target = $(this), 
      $source = $(source), 
      source = $source.attr('name')||$source.attr('id'); 

     // Add Data 
     var dependsOnStatus = $target.data('dependsOnStatus')||{}; 
     dependsOnStatus[source] = false; 
     $target.data('dependsOnStatus',dependsOnStatus); 

     // Add Event 
     $source.change(function(){ 
      var pass = false; 
      var $source = $(this); // so $source won't be a group for radios 

      // Determine 
      if ((value === null) || (typeof value === 'undefined')) { 
       // We don't have a value 
       if ($source.is(':checkbox,:radio')) { 
        pass = $source.is(':selected:enabled,:checked:enabled'); 
       } 
       else { 
        pass = Boolean($source.val()); 
       } 
      } 
      else { 
       // We do have a value 
       if ($source.is(':checkbox,:radio')) { 
        pass = $source.is(':selected:enabled,:checked:enabled') && ($source.val() == value); 
       } 
       else { 
        pass = $source.val() == value; 
       } 
      } 

      // Update 
      var dependsOnStatus = $target.data('dependsOnStatus')||{}; 
      dependsOnStatus[source] = pass; 
      $target.data('dependsOnStatus',dependsOnStatus); 

      // Determine 
      var passAll = true; 
      $.each(dependsOnStatus, function(i,v){ 
       if (!v) { 
        passAll = false; 
        return false; // break 
       } 
      }); 
      // console.log(dependsOnStatus); 

      // Adjust 
      if (!passAll) { 
       $target.attr('disabled','disabled').addClass('disabled'); 
      } 
      else { 
       $target.removeAttr('disabled').removeClass('disabled'); 
      } 
     }).trigger('change'); 

     // Chain 
     return this; 
    }; 


})(jQuery); 

Per un esempio:

Javascript:

$(function(){ 
     $('#foo').dependsOn('#boo').dependsOn('#moo','test') 
      .dependsOn(":radio[name=doo]",'true'); 
    }); 

HTML:

<div> 
    <select name="foo" id="foo" > 
     <option value="5" selected="selected">5</option> 
     <option value="15">15</option> 
     <option value="25">25</option> 
    </select> 
    <input type="text" name="moo" id="moo" /> 
    <input type="checkbox" name="boo" id="boo" /> 
    <input type="radio" name="doo" value="false" /> 
    <input type="radio" name="doo" value="true" /> 
    <br/> 
    Type test in the textbox and check the checkbox to enable the select. 
    <br/> 
    By <a href="http://www.balupton.com" target="_blank">Benjamin "balupton" Lupton</a>, for <a href="http://stackoverflow.com/q/3731586/130638" target="_blank">a StackOverflow Question</a> 
</div> 

Answer 2

mi è venuta in mente questo codice:

$("input[target]").change(function(){ 
      var target = $("[name='"+$(this).attr("target")+"']"); 
      if($(this).is(":checked")){    
       target.attr("oldvalue",target.val()).val($(this).val()); 
      }else{ 
       target.val(target.attr("oldvalue")); 
      } 
     }); 
     $("select").change(function(){ 
      $("[target='"+ $(this).attr("name") +"'][value='"+ $(this).val() +"']").attr('checked', true); 
     }); 

E per il formato HTML:

<label><input type="checkbox" target="foo" value="15"/> Check </label> 
    <select name="foo"> 
     <option value="5" selected="selected">5</option> 
     <option value="15">15</option> 
     <option value="25">25</option> 
    </select> 

Quindi, in pratica, tutto quello che dovete fare è di avere un "bersaglio" attributo su un input, che deve corrispondere all'attributo "nome" del menu a discesa a cui si desidera associare. Imposta anche il valore dell'ingresso, che dovrebbe selezionare il valore del suo menu a discesa corrispondente quando è selezionato.

Answer 3

jQuery disable button (NOT Submit) until field validates + Validation Plugin

jQuery enable/disable show/hide button w/ SELECT options. Get remaining option values

jQuery disable SELECT options based on Radio selected (Need support for all browsers)