jQuery - 禁用基於另一個字段選擇值的輸入字段

Question

我正在尋找一個這樣做的jQuery插件。

例如：

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

這樣的複選框將僅如果「5」選項被選擇以下啓用。

或

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

在這種情況下，如果「噓」檢查選擇只啓用。

我設法拿出，做這樣的事情代碼：

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

}); 

似乎對於依賴無線電選擇工作確定，但我想實現這個對於任何類型的輸入或組合（或者至少大部分），而不必爲每種輸入類型編寫單獨的代碼。

無論如何，是否有人知道這樣的插件？或者可能對我的代碼有建議？ :)

Answer 1

在這裏你去:-)

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

舉一個例子：

的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

我想出這個代碼：

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

以及用於在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> 

所以基本上，所有你需要做的就是有一個「目標」屬性應該與您要綁定的下拉列表的「name」屬性匹配。同樣設置輸入的值，當它被選中時，它應該選擇相應的下拉列表的值。

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)