javascript - 禁用复选框的功能无法正常工作

Question

功能是:当选中其中一个复选框时，必须禁用另一个。它正在工作，但是在更新 WordPress 页面并尝试编辑复选框后，我遇到了以下问题:

首先，我检查了“显示摘录”，然后更新了页面，如您所见，有 2 个框被选中

复选框”

<div><input type="checkbox" id="dx_article_excerpt" onclick="disableContentCheckbox()"><label for="dx_article_excerpt"><?php _e( 'Display Excerpt', 'dxeasypb' ); ?></label></div>
<div><input type="checkbox" id="dx_article_content" onclick="disableExcerptCheckbox()"><label for="dx_article_content"><?php _e( 'Display Content', 'dxeasypb' ); ?></label></div>

这是函数:

function disableContentCheckbox(){
            if (document.getElementById('dx_article_excerpt').checked) {
                document.getElementById("dx_article_content").disabled = true;
            } else {
                document.getElementById("dx_article_content").disabled = false;
            }
        }
        function disableExcerptCheckbox(){
            if (document.getElementById('dx_article_content').checked) {
                document.getElementById("dx_article_excerpt").disabled = true;
            } else {
                document.getElementById("dx_article_excerpt").disabled = false;
            }
        }

为什么会发生这种情况？

Answer 1

禁用它时只需取消选中另一个复选框即可。

我注释掉了 document.getElementById("dx_article_content").disabled = true; 只是为了向您展示当您选中一个并单击另一个时它的外观。在代码中取消注释它们。

<div><input type="checkbox" id="dx_article_excerpt" onclick="disableContentCheckbox()"><label for="dx_article_excerpt"><?php _e( 'Display Excerpt', 'dxeasypb' ); ?></label></div>
<div><input type="checkbox" id="dx_article_content" onclick="disableExcerptCheckbox()"><label for="dx_article_content"><?php _e( 'Display Content', 'dxeasypb' ); ?></label></div>

<script>
  function disableContentCheckbox() {
    if (document.getElementById('dx_article_excerpt').checked) {
      document.getElementById('dx_article_content').checked = false;
      //document.getElementById("dx_article_content").disabled = true;
    } else {
      document.getElementById("dx_article_content").disabled = false;
    }
  }

  function disableExcerptCheckbox() {
    if (document.getElementById('dx_article_content').checked) {
      document.getElementById('dx_article_excerpt').checked = false;
      //document.getElementById("dx_article_excerpt").disabled = true;
    } else {
      document.getElementById("dx_article_excerpt").disabled = false;
    }
  }
</script>