Question

我有两个复选框：

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

我希望在点击第一个时，自动禁用内容复选框。我尝试过以下的事情：

if (document.getElementById('dx_article_excerpt').checked) {
    document.getElementById("dx_article_content").disabled = true;
}

但猜猜是什么......它不起作用。

Answer 1

为什么不工作？

因为没有活动.assign onchange活动

onchange="change()"
将js包裹在函数

更新了切换

＆＃13;

function change(){
        document.getElementById("dx_article_content").disabled = document.getElementById('dx_article_excerpt').checked;
}

＆＃13;

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

＆＃13;

Answer 2

使用点击事件使用jquery：

将内容检查状态更改为以下代码段

＆＃13;

$(function() {
  $("#dx_article_excerpt").click(function(){
     $("#dx_article_content").prop("disabled",this.checked);
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="checkbox" id="dx_article_excerpt"><label for="dx_article_excerpt">first</label></div>
<div><input type="checkbox" id="dx_article_content"><label for="dx_article_content">content</label></div>

＆＃13;

Answer 3

＆＃13;

$(".checkbox").change(function() {
  $(".checkbox").not(this).prop("disabled", $(this).is(":checked"))
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="checkbox" id="dx_article_excerpt" class="checkbox"><label for="dx_article_excerpt">1</label></div>
<div><input type="checkbox" id="dx_article_content" class="checkbox"><label for="dx_article_content">2</label></div>

＆＃13;

＆＃13; 1.为两个复选框添加一个类。 2.使用当前状态复选框更改为禁用另一个复选框

选中其他复选框后，复选框未禁用

3 个答案: