Jquery BlockUIプラグイン - ブロック入力フィールド

Question

JQuery BlockUIプラグインを使用して入力フィールドを直接無効にすることができるかどうかを知りたいと思います。

jqueryプラグインのサンプルが表示されます。

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

jqueryセレクタの入力フィールドIDだけを入力すると、入力されていません。

$(document).ready(function() { 

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

私はちょうど入力フィールドIDを与えるとき、それは動作しませんが、その代わりに、私はアンカータグのIDまたはdivタグのIDを与える場合には、正常に動作しています。

入力フィールド（テキスト、選択など）だけをブロックするソリューションがあります。

お知らせください。

Answer 1

あなただけブロックそれにしようとするのではなく、読み取り専用にする入力を設定できます

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

または

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

Answer 2

私は（BlockUIのブロックへの呼び出しを行うためにラッパー関数のペアを書きました） 関数。私は2つの理由からそれらを書いた：1.いくつかのデフォルトオプションを設定するには、2.要素が複数回ブロックされないようにする。

私はあなたと同じ問題を実行しました。ここでは、IEがINPUT要素をブロックしようとすると例外をスローします。私はブロックされている要素がINPUTかどうかを調べるためにブロック機能を変更し、そうであればINPUTを無効にして代わりにINPUTの親をブロックします。 DIVの中に入力をラップして（親として機能するように）、UIのわずかな部分のみがブロックされるようにします。

// 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; 
      } 
     } 

    }); 
}