Question

我有一个div，当单击一个复选框时，我想禁用div中的所有元素，包括禁用其中一个元素的onClick。这是代码库：https://codepen.io/anon/pen/JVwMOq

HTML：

<input type="checkbox" onChange="checkMe(this)">
<div id="test">
  <input type="text">
   <span class="test">
    <img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe()">
   </span>
</div>

JS：

function checkMe(element){
  if($(element).prop('checked') === true){
    $('#test').prop('disabled', true).off("click");
  }
  else{
    $('#test').prop('disabled', false).on("click");
  }
}

有什么建议吗？谢谢！

Answer 1

您可以使用CSS禁用的此功能。您不能在div上添加禁用，它可以与输入配合使用，等等。

$('#clickCheckbox').change(function() {
    if($(this).is(":checked")) {
      $('#test').addClass('disable-button');
    }else{
      $('#test').removeClass('disable-button')
    }
    $('#clickCheckbox').val($(this).is(':checked'));        
});

.disable-button {
	  pointer-events: none;
    cursor: not-allowed;
    text-decoration: none;
    color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="clickCheckbox">
<div id="test">
  <input type="text">
   <span class="test">
    <img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe()">
   </span>
</div>

Answer 2

我在下面有一个可行的解决方案。我添加了一个额外的输入字段，以检查它是否可以在多个项目上使用。

我创建了一个检查功能，以查看您的物品是否被检查。

const isChecked = (element) => document.getElementById(element.id).checked ? true : false

然后更新了likeMe函数以传入当前ID，如果选中了此复选框，则返回null。

function likeMe(element) {
    if (isChecked(element)) {
        return null
    } else {
        console.log('Calling likeMe()');
    }
}

然后，我更新了您的checkMe函数，以传入当前元素和targetdiv，以便在代码的其他部分更可重用。

function checkMe(element, targetDiv) {
    const targetDivInput = `#${targetDiv} input`
    const targetDivClassName = `.${targetDiv}`
    if (isChecked(element)) {
        $(targetDivInput).prop('disabled', true);
        $(targetDivClassName).toggleClass('disabled')
    } else {
        $(targetDivInput).prop('disabled', false);
        $(targetDivClassName).toggleClass('disabled')
  }
}

然后对标记进行一些小的更改，以将id传递给函数

<div id="test">
<input type="text">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe('test')">
</span>
</div>

，并向您的CSS添加了禁用状态，以使用户看不到光标。

#like{
    cursor: pointer;
}
.disabled #like {
    cursor: inherit;
}

这是最终结果。

    #like{
        cursor: pointer;
    }
    .disabled #like {
        cursor: inherit;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

const isChecked = (element) => document.getElementById(element.id).checked ? true : false

function likeMe(element) {
  if (isChecked(element)) {
    return null
  } else {
    console.log('Calling likeMe()');
  }
}

function checkMe(element, targetDiv) {
  const targetDivInput = `#${targetDiv} input`
  const targetDivClassName = `.${targetDiv}`
  if (isChecked(element)) {
    $(targetDivInput).prop('disabled', true);
    $(targetDivClassName).toggleClass('disabled')
  } else {
    $(targetDivInput).prop('disabled', false);
    $(targetDivClassName).toggleClass('disabled')
  }
}

</script>
    <input id="textCheck" type="checkbox" onChange="checkMe(this,'test')">

    <div id="test">
    <input type="text">
    <input type="text">
    <span class="test">
    <img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe('test')">
    </span>
    </div>

如何使用jQuery禁用div中的所有元素

2 个答案: