jQuery / JavaScript-在函数中单击按钮本身

Question

我需要一种方法来将该元素压入该元素调用的函数中，并将其禁用。

我尝试使用$（this），但无法正常工作，这是我的代码：

<script>
function x(){
    $(this).prop("disabled",true);
}
<script>
<input type='button' onclick='x()' value='Disable me' />
<input type='button' onclick='x()' value='Disable me' />

  function x(){ $(this).prop("disabled",true); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type='button' onclick='x()' value='Disable me' /> <input type='button' onclick='x()' value='Disable me' />

我想避免添加和调用ID，有什么办法吗？

谢谢！

-编辑-

我无法编辑输入元素，它们在另一个文件中。
在html文件之前调用了JS代码，但我无法编辑html文件。

Answer 1

解决方案1：

您可以简单地附加一个单击事件处理程序，该处理程序以类型为type的输入作为目标，然后使用this事件处理程序作为调用该事件的元素的目标。

<script>
$(document).ready(function(){
$("input:button").click(function()
{
  $(this).prop("disabled",true);
});
});
</script>
<input type='button' value='Disable me' />
<input type='button' value='Disable me' />

范例： https : //jsfiddle.net/DinoMyte/jmLynLsg/1/

解决方案2：

您可以从javascript函数传递this关键字， this关键字将用作指向该元素的指针。

 <script>
function x(obj){
        $(obj).prop("disabled",true);
    }
</script>
<input type='button' onclick='x(this)' value='Disable me' />
<input type='button' onclick='x(this)' value='Disable me' />

范例： https : //jsfiddle.net/DinoMyte/jmLynLsg/2/

Answer 2

尝试这个：

 function x(elem){ $(elem).prop("disabled",true); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type='button' onclick='x(this)' value='Disable me' /> <input type='button' onclick='x(this)' value='Disable me' />

Answer 3

最好从html中删除onclick并像这样在jQuery中进行绑定

$(document).ready(function(){
    $('input[type="button"]').on('click', function(){
         $(this).prop('disabled', true);
  });
});

看看这个工作的小提琴。

Answer 4

您可以通过几种方式使用jQuery获取元素。 在输入标签的情况下，您可以只说$('input') ，但这将获取所有input元素。 如果给它一个id，例如<input id="test" ...> ，那么$('#test')就可以了。 否则， $('input').prop('disabled',true); 在Chrome浏览器中为我工作。

这是我的完整代码：

<html>
<head>
</head>
<body>

    <input id="test" type='button' onclick='disable()' value='Disable me' />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    function disable() {
        $('#test').prop('disabled',true);
    }
    </script>
</body>
</html>

Answer 5

我能想到的一种方法不需要更改正在使用的HTML，但是确实需要更改收到的DOM，方法是：

function x() {
  $(this).prop('disabled', true);
}

// selecting, and iterating over, all <input> elements with
// an in-line 'onclick' event-handler attribute:
$('input[onclick]').each(function() {

  // retrieving the contents of the 'onclick' attribute:
  var onClickFunction = $(this).attr('onclick');

  // setting the onClickFunction variable to the
  // substring of the existing value from the first
  // character to the index of the first '('
  // character, so from 'x()' to 'x' or from
  // 'function1();function2()' to 'function1'
  // (this could be worked-around, but this is
  // a simple proof-of-concept):
  onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));

  // if there is a function, or a variable, held as a
  // property of the window object, then:
  if (window[onClickFunction]) {
    // we remove the 'onclick' attribute, and use the
    // on() method to add the event-handler back:
    $(this).removeAttr('onclick').on('click', window[onClickFunction]);
  }
});

 function x() { $(this).prop('disabled', true); } $('input[onclick]').each(function() { var onClickFunction = $(this).attr('onclick'); onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('(')); if (window[onClickFunction]) { $(this).removeAttr('onclick').on('click', window[onClickFunction]); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type='button' onclick='x()' value='Disable me' /> <input type='button' onclick='x()' value='Disable me' />

值得注意的是，虽然以上内容在jQuery中是完全可能的，但在普通JavaScript中也可以实现：

function x() {
  this.disabled = true;
}

// excuse the absurdly-long variable-names; they were meant to be
// descriptive.
// here we retrieve all <input> elements with an onclick attribute:    
var inputsWithOnClick = document.querySelectorAll('input[onclick]'),

  // here we use Array.from() to turn that collection into an Array:
  arrayOfOnClickInputs = Array.from(inputsWithOnClick);

// iterating over the Array, 'input' (the first argument)
// refers to the current element of the array over which
// we're iterating:
arrayOfOnClickInputs.forEach(function(input) {

  // retrieving the contents of the 'onclick' attribute:
  var onClickFunction = input.getAttribute('onclick');

  // updating that variable to contain the substring of
  // of the attribute-value, from the first character to
  // the first occurrence of of the '(' character:
  onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('('));

  // as above:
  if (window[onClickFunction]) {

    // removing the 'onclick' attribute:
    input.removeAttribute('onclick');

    // using EventTarget.addEventListener to bind the
    // function to the click-event on the <input> element:
    input.addEventListener('click', window[onClickFunction]);
  }
});

 function x() { this.disabled = true; } var inputsWithOnClick = document.querySelectorAll('input[onclick]'), arrayOfOnClickInputs = Array.from(inputsWithOnClick); arrayOfOnClickInputs.forEach(function(input) { var onClickFunction = input.getAttribute('onclick'); onClickFunction = onClickFunction.substring(0, onClickFunction.indexOf('(')); if (window[onClickFunction]) { input.removeAttribute('onclick'); input.addEventListener('click', window[onClickFunction]); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type='button' onclick='x()' value='Disable me' /> <input type='button' onclick='x()' value='Disable me' />

究其原因，这些方法是简单的，在这种情况下，属性是已知的（ onclick ），以及你想要使用this功能，它的jQuery为您管理范围内，并addEventListener()也不会自动地。

而且老实说，我不认为一个替代方法提供的this到您所需要的那样。

参考文献：

CSS：
- 属性选择器（ [attribute] ）。
JavaScript的：
- Array.prototype.from() 。
- Array.prototype.forEach() 。
- Document.querySelectorAll() 。
- EventTarget.addEventListener() 。
- Element.getAttribute() 。
- Element.removeAttribute() 。
- String.prototype.indexOf() 。
- String.prototype.substring() 。
jQuery的：
- attr() 。
- each() 。
- on() 。
- prop() 。
- removeAttr() 。

jQuery / JavaScript-在函数中单击按钮本身

问题描述

5 个解决方案

解决方案1
2 已采纳 2016-06-21 21:39:33

解决方案2
1 2016-06-21 21:35:53

解决方案3
1 2016-06-21 21:41:41

解决方案4
1 2016-06-21 21:45:58

解决方案5
1 2016-06-21 22:46:46

jQuery / JavaScript-在函数中单击按钮本身

问题描述

5 个解决方案

解决方案1 2 已采纳 2016-06-21 21:39:33

解决方案2 1 2016-06-21 21:35:53

解决方案3 1 2016-06-21 21:41:41

解决方案4 1 2016-06-21 21:45:58

解决方案5 1 2016-06-21 22:46:46

解决方案1
2 已采纳 2016-06-21 21:39:33

解决方案2
1 2016-06-21 21:35:53

解决方案3
1 2016-06-21 21:41:41

解决方案4
1 2016-06-21 21:45:58

解决方案5
1 2016-06-21 22:46:46