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>

В этом случае выбор должен быть включен, только если проверено "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();

});

, кажется, работает нормально для выбора, который зависит от радио, но я хочу реализовать это для любого типа ввода или комбинации (или, по крайней мере, для большинства из них), без необходимости писать отдельный код длякаждый тип ввода.

в любом случае, кто-нибудь знает такой плагин?или может быть есть предложения к моему коду выше?:)

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

jQuery отключить кнопку (НЕ отправить), пока поле не подтвердит + плагин проверки

jQuery включить / отключить кнопку показать / скрыть с параметрами SELECT. Получить оставшиеся значения параметров

jОтключение опций SELECT в зависимости от выбранного радио (требуется поддержка всех браузеров)

Answer 3

Я придумал этот код:

$("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>

Итак, в общем, все, что вам нужно сделать, это иметь "цель"msgstr "атрибут на входе, который должен соответствовать атрибуту" имя "выпадающего меню, к которому вы хотите привязать.Установите значение входа также, который должен выбрать значение соответствующего раскрывающегося списка, когда это проверено.