jQuery .prop() vs .attr()

by bmarsh123

HTML

<div>
    <label>
        Using jQuery <a href="http://api.jquery.com/prop/">.prop()</a>:
    </label>
</div>
<div>
    <select class="selProp">
        <option value="0" disabled="disabled" selected="selected">--Select an Option--</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <input type="text" class="tbProp" disabled="disabled" />
    <input type="checkbox" class="cbProp" disabled="disabled" />
</div>
<hr />
<div>
    <label>
        Using jQuery <a href="http://api.jquery.com/attr/">.attr()</a>:
    </label>
</div>
<div>
    <select class="selAttr">
        <option value="0" disabled="disabled" selected="selected">--Select an Option--</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <input type="text" class="tbAttr" disabled="disabled" />
    <input type="checkbox" class="cbAttr" disabled="disabled" />
</div>

CSS

div:first-child {
    padding-top: 20px;
}
div { padding: 5px; }

JavaScript

$(document).ready(function() {
    $('.selProp').change(function() {
        var result = ($('.selProp').val() != '2') ? false : true;
        $('.tbProp, .cbProp').prop('disabled', result);
        alert($('.tbProp').attr('disabled'));
    });
    
    $('.selAttr').change(function() {
        var result = ($('.selAttr').val() != '2') ? false : true;
        $('.tbAttr, .cbAttr').attr('disabled', result);
        alert($('.tbAttr').attr('disabled'));
    });
});