jQuery - wyłącz pole wejściowe na podstawie innej wybranej wartości pola

Question

Poszukuję wtyczki jQuery, która to robi.

na przykład:

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

więc pole będzie włączony tylko wtedy, gdy opcja „5” jest wybrany poniżej.

lub

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

W takim przypadku wybierz powinien tylko jeśli włączona jest zaznaczone "boo".

udało mi się wymyślić kodu, który robi coś takiego:

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

}); 

wydaje się działać ok wybiera, które zależą od radia, ale chcę, aby zaimplementować to dla każdego typu wejścia lub kombinacji (lub przynajmniej większość z nich), bez konieczności pisania oddzielnego kodu dla każdego rodzaju danych wejściowych.

czy ktoś jest świadomy takiej wtyczki? a może masz sugestie do mojego kodu powyżej? :)

Answer 1

Proszę bardzo :-)

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

Dla przykładu:

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

mam wymyślić ten kod:

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

I do formatu 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> 

Więc w zasadzie, wszystko co musisz zrobić, to mieć "cel" atrybut na wejściu, który powinien pasować do atrybutu "nazwa" menu, do którego ma zostać przypisane. Ustaw również wartość wejściową, która powinna wybrać wartość odpowiadającego jej menu rozwijanego, gdy jest zaznaczone.

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)