Checkbox is not disabled after checking other checkbox

I have 2 checkboxes:

<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>

I want when the first is clicked, the content checkbox to be disabled automatically. I've tried the following thing:

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

But guess what.. it's not working.