2010-09-16 6 views
6

Je suis à la recherche d'un plugin jQuery qui fait cela.jQuery - désactive le champ de saisie en fonction d'un autre champ sélectionné valeur

par exemple:

<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> 

de sorte que la case à cocher serait uniquement être activé si l'option "5" est sélectionné ci-dessous.

ou

<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> 

Dans ce cas, la sélection doit seulement activé si "boo" est cochée.

j'ai réussi à trouver un code qui fait quelque chose comme ceci:

$("*[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(); 

}); 

semble bien fonctionner pour sélectionner qui dépendent des radios, mais je veux mettre en œuvre ce pour tout type d'entrée ou d'une combinaison (ou au moins la plupart d'entre eux), sans avoir à écrire un code séparé pour chaque type d'entrée.

de toute façon, quelqu'un est-il au courant d'un tel plugin? ou peut-être avoir des suggestions à mon code ci-dessus? :)

Répondre

7

Ici, vous allez :-)

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); 

Pour un exemple:

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> 
+0

vous remercie. vous avez fait un travail incroyable! le seul problème est que input.dependsOn (radio = valeur) ne semble pas fonctionner – Alex

+0

Se penchera sur elle :) – balupton

+1

Correction: http: // jsfiddle.net/264Yd/7/ – balupton

1

Je suis venu avec ce code:

$("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); 
     }); 

Et pour le format 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> 

Donc, fondamentalement, tout ce que vous avez à faire est d'avoir une "cible" attribut sur une entrée, qui doit correspondre à l'attribut "name" du menu déroulant auquel vous voulez vous lier. Définissez également la valeur de l'entrée, qui doit sélectionner la valeur de la liste déroulante correspondante lorsqu'elle est cochée.

+0

grâce XAR, mais l'attribution d'une valeur basée sur un autre état d'entrée est pas vraiment ce que je veux. – Alex

Questions connexes