Плагин блокировки JQuery BlockUI - поле ввода блокировки

Question

Я хотел бы знать, можно ли использовать плагин JQuery BlockUI для прямого отключения поля ввода.

Я вижу образцы на плагине jquery.

http://jquery.malsup.com/block/#element.

, когда я указываю только идентификатор поля ввода в селекторе jquery, он не работает.

$(document).ready(function() { 

    $('#blockButton').click(function() { 
     $('#inputId').block({ message: null }); 
    }) 

, когда я просто дать поле ввода идентификатора, он не работает, но вместо этого, если я дать якорный идентификатор тега или тега Div идентификатор он работает нормально.

есть решение для блокировки только полей ввода (текст, выбор и т. Д.).

сделайте, пожалуйста, дайте мне знать.

Answer 1

Вы можете просто установить вход в READONLY вместо того, чтобы пытаться блок это:

$('#inputId').attr('readonly', 'readonly'); 

или

$('#inputId').prop('readonly', true); 

Answer 2

Я написал пару функций оберток для звонков в блоке BlockUI (в). Я написал их по двум причинам: 1. Чтобы настроить некоторые параметры по умолчанию, 2. Чтобы предотвратить блокирование элементов более одного раза.

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

// Wrapper function for the BlockUI Plugin http://jquery.malsup.com/block/ 
// This function blocks an element. 
// @param {String, Object} element - Reference to the element to block, either the selector string, or the jQuery object itself 
// @param {Object} options - a hash of options to pass to the block() call 
function blockElement(element, options) { 

    if (typeof element == 'string') { 
     element = $(element); 
    } 

    if (element.length > 0) { 
     if (typeof options == 'undefined') { 
      options = {}; 
     }   

     initHash(options, 
      { message: 'Please Wait', 
       css: { width: '20%', padding: '3px' }, 
       overlayCSS: {}, 
       cursor: 'wait' 
      } 
     ); 

     initHash(options.css, { cursor: options.cursor }); 
     initHash(options.overlayCSS, { cursor: options.cursor }); 

     var blockOptions = { 
      message: options.message, 
      css: options.css, 
      overlayCSS: options.overlayCSS, 
      fadeIn: 0 
     } 

     if (!$.support.leadingWhitespace) { 
      // disable fading in IE browsers less than IE9, it's slow to animate 
      blockOptions.fadeIn = 0; 
     } 

     // if an element is already blocked, do not try to block it again 
     var isBlocked = element.attr('data-isBlocked'); 
     if (isBlocked != 'true') { 
      element.attr('data-isBlocked', true); 
      // do not try to block input elements, it breaks in IE 
      // instead disable the input and block it's parent 
      if (element.is('input')) { 
       element.parent().block(options); 
       element.attr('disabled', 'disabled'); 
      } else { 
       element.block(blockOptions); 
      } 

     } 
    } 
} 

// Unblocks an element that was blocked using blockElement() 
// @param {String, Object} element - Reference to the element to block, either the selector string, or the jQuery object itself 
function unblockElement(element) { 
    if (typeof element == 'string') { 
     element = $(element); 
    } 

    var options = {}; 
    if (!$.support.leadingWhitespace) { 
     // disable fading in IE browsers less than IE9 
     options.fadeOut = 0; 
    } 

    if (element.length > 0) { 
     element.attr('data-isBlocked', false); 
     if (element.is('input')) { 
      element.removeAttr('disabled'); 
      element.parent().unblock(options); 
     } else { 
      element.unblock(options); 
     } 
    } 
} 


// initalize a hash/map/associative-array with default values 
// if the keys already exist, then they are left alone 
// @param: {Object} targetHash - the hash that is going to be initalized 
// @param: {Object} defaults - a hash containing the default values that should be added to targetHash 
// @usage: initHash(targetHash, {a:1,b:2,c:3}); 
function initHash(targetHash, defaults) { 
    $.each(defaults, function (index, value) { 
     if (!(index in targetHash)) { 
      targetHash[index] = value; 
     } else { 
      if (targetHash[index] == null || targetHash[index] == undefined) { 
       targetHash[index] = value; 
      } 
     } 

    }); 
}