jQuery - 基于另一个字段选择值禁用输入字段

Posted 2023-05-09

【中文标题】jQuery - 基于另一个字段选择值禁用输入字段

【英文标题】：jQuery - disable input field based on another field selected value

【发布时间】：2011-04-13 11:51:36

【问题描述】：

我正在寻找一个可以做到这一点的 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>

在这种情况下，只有在选中“boo”时才应启用选择。

我设法想出了一个代码来做这样的事情：

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

);

对于依赖无线电的选择似乎可以正常工作，但我想为任何类型的输入或组合（或至少大部分）实现这一点，而不必为每种类型的输入编写单独的代码。

无论如何，有人知道这样的插件吗？或者对我上面的代码有什么建议？ :)

【参考方案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://***.com/q/3731586/130638" target="_blank">a *** Question</a>
</div>

【讨论】：

谢谢。你做得很棒！唯一的问题是 input.dependsOn(radio=value) 似乎不起作用

我发现触发器导致更改事件在所有单选按钮上触发，从而导致禁用状态被切换。这是我的固定版本。 jsfiddle.net/rcollette/8V2ru

【参考方案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>

所以基本上，您所要做的就是在输入上有一个“目标”属性，该属性应该与您要绑定到的下拉列表的“名称”属性相匹配。也设置输入的值，当它被选中时，它应该选择其对应下拉列表的值。

【讨论】：

感谢 xar，但根据另一个输入状态分配值并不是我真正想要的。

【参考方案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)

【讨论】：

谢谢，但以上链接都没有真正回答我的问题。

【参考方案4】：

dependjs 在 HTML 中定义依赖关系。

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

<label><input type="checkbox" depend=[enabled=>[name=foo] option[value='5']] /> Check </label>

依赖是在依赖元素中定义的。