jQuery根据选择禁用单选按钮，清除输入，不带控制键的多重选择

Question

一段时间以来，我一直在努力处理此表单（https://jsfiddle.net/jmester13/xpvt214o/716199/），并希望获得一些出色的TODO，希望得到一些帮助。

// TODO select attribute added and removed on click for the option -我相信这将有助于其他待办事项。应该也应该有最佳实践。

// TODO disable and enabling of radio button -如果有3个选项，请选择警报前应禁用``是''单选按钮，现在警报后将立即禁用。如果用户选择“是”，则他们的需求是逻辑性的，因此他们不能再选择第三个下拉项。如果他们选择是，则选择否，则需要清除表格中的金额。

// TODO Deselect cleared item from dropdown not all selections & Clear input field -如果单击了删除li的按钮，则应清除金额并从列表中取消选择项目。

代码在下面，感谢所有帮助！

$(document).ready(function() {

            $(function(){

                var last_valid_selection = null;
                $('#charity-select').on('change', function(event) {
                    // alert( this.value );

                    // $(this).find('option').attr('selected','selected');

                    // TODO select attribute added and removed on click for the option

                    // $("select[multiple] option").mousedown(function () {
                    //     if ($(this).prop("selected"))
                    //         $(this).prop("selected", false);
                    //     else
                    //         $(this).prop("selected", true);
                    //     return false;    });

                    // Adds selected attr to all options
                    // $('option').on(function(event) {
                    //     $(this).attr("selected", "selected");
                    // });

                    // Adds selected attr to select DOM
                    // $(this).attr('selected','selected')
                    // Where to show selections


                    $('#displaydiv').html("");

                    // limit selection to three
                    if ($(this).val().length > 3) {

                        $(this).val(last_valid_selection);

                        // Currently disables after alert fires
                        $("input[id^=yesCheck]:radio").attr('disabled',true);


                        alert ('You cannot select more than 3 options.');
                    } else {
                        last_valid_selection = $(this).val();

                    }
                    
                    // TODO Prevent Needing command Key for Multi-Selection

                    // $('option').mousedown(function(e) {
                    //     // e.preventDefault();
                    //     $(this).toggleClass('selected');
                    //     // var el = e.target;
                    //     // if (el.hasAttribute('selected')) el.removeAttribute('selected');
                    //     // else el.setAttribute('selected', '');
                    //     // hack to correct buggy behavior
                    //     //         var select = el.parentNode.cloneNode(true);
                    //     //         el.parentNode.parentNode.replaceChild(select, el.parentNode);
                    //
                    //     // return false;
                    // });

                    // Build selected display
                    selected = $(this).val() + "";
                    arr = selected.split(",");
                    i = 0;

                    $(arr).each(function(){

                        data = '<li class="row">'+ arr[i] + ' Amount $<input id ="num'+i+'" name ="num'+i+'" type="number" required >'+'</li><button class="delete '+ arr[i]+'" type="button'+ arr[i]+'">Remove ' + arr[i]+ '</button>';
                        //$.get('includes/'+ arr[i] + '.php', function( data ) {
                        $('#displaydiv').append(data);
                        //});
                        i++;
                    });

                    // Add All
                    //this calculates values automatically
                    sum();
                        $("#num0, #num1, #num2, #num3").on("keydown keyup", function() {
                            sum();
                        });

                    // This shows the total and divides
                    function sum() {
                        tt = 0;
                        pp = 0;

                        $("input[name^='num']").each(function(){
                            tt +=Number($(this).val());
                            pp +=Number($(this).val()) / Number(26);
                        });

                        $("#deduction-total").val(tt);
                        $("#sum-per-period").val(pp);
                    }


                });
            });

            // Remove Selection.

                // TODO Deselect cleared item from dropdown not all selections
                // TODO Clear input field

            $(document).on("click",".delete",function() {

                $(this).prev('li').remove();

                $("#maindiv > option").attr("selected",false);

                $(this).remove();
            });

            // Dropdown Control for adding Organization

            $("input[name=yesno]").on('change', function(){
                $("#add-org-fields").removeClass('hidden');
                $("#add-org-fields")[this.id=='yesCheck'?'slideDown':'slideUp']();
                // $("#add-org-fields").addClass('hidden');
            });

            // Control for displaying Deduction totals
            $("input[name=deductioncheck]").on('change', function(){
                $("#ifPayrollDeduction")[this.id=='payroll-deduction'?'slideDown':'slideUp']();
            });
        });

#charity-select{
            width:300px;
            padding:10px;
            margin:10px;

        }
        #charity-select option {
            padding: 5px 0;
        }
        
        .hidden{
            display: none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>

<h1>Form</h1>

<form id="form" action="../wp-content/themes/stride-starter/results.php" method="post" target="_blank">
    <div class="full">
        <strong>First Name:<span style="color: #ff0000;">*</span></strong>
        <input id="first_name" class="form_input" name="first_name" type="text" value="" required/>
    </div>

    <div class="full">
        <strong>Last Name:<span style="color: #ff0000;">*</span></strong>
        <input id="last_name" class="form_input" name="last_name" type="text" value="" required/>
    </div>

    <div class="full">
        <strong>Email Address:<span style="color: #ff0000;">*</span></strong>
        <input id="email" class="form_input" name="email" type="email" value="" required />
    </div>

    <h3> Select up to a Maximum of 3 qualified 501 (c)3 non-profit organizations below and enter a desired amount in the annual amount field</h3>

    <select id="charity-select" multiple="multiple">
        <option value="Value1" class="">Value 1</option>
        <option value="Value2" class="">Value 2</option>
        <option value="Value3" class="">Value 3</option>
        <option value="Value4"  class="">Value 4</option>
        <option value="Value5"  class="">Value 5</option>
        <option value="Value6"  class="">Value 6</option>
    </select>

    <div id="displaydiv">

    </div>

    <div class="full">
        <label class="choice" for="other_organization"> Would you like to add another organization not listed above? </label>
        <div class="test">
            Yes <input type="radio" name="yesno" class="yes" id="yesCheck" required>
            No <input type="radio"  name="yesno" id="noCheck" checked="checked" >
        </div>
        <div class="hidden" id="add-org-fields">
            <div id="ifYes">
                <p>Organization Name: <input type='text' id='org-name' name='org-name'></p>
                <p>Amount: <input type='number' id='num3' name='num3'></p>
                <p>Street Address: <input type='text' id='street-address' name='street-address'></p>
                <p>Suite or Floor Number: <input type='number' id='suite' name='suite'></p>
                <p>City: <input type='text' id='city' name='city'></p>
                <p>Web Address: <input type='url' id='web-address' name='web-address'></p>
                <p>Contact Name: <input type='text' id='contact-name' name='contact-name'></p>
                <p>Phone Number: <input type='tel' id='phone-number' name='phone-number'></p>
                <p>E-mail: <input type='email' id='email' name='email'></p>
            </div>
        </div>
    </div>

    <h3>Select a choice from the following options</h3>
    <div class="full">
    <input id="one-time-payment" class="radio" name="deductioncheck" type="radio" value="one-time-payment" required/>
    <label class="choice" for="one-time-payment">One-Time Payment (deduction will occur on the first payroll of the new year)</label>
    </div>

    <div class="full">
    <input id="payroll-deduction" checked="checked"   class="radio" name="deductioncheck" type="radio" value="payroll-deduction" />
    <label class="choice" for="payroll-deduction">Payroll Deduction (26 time per year)</label>
    </div>
    <h3>Payroll Deduction Total</h3>
    <div id="ifPayrollDeduction">
        <p> I authorize my employer to deduct 26 time per year. $ <input type="text" name="sum-per-period" id="sum-per-period" readonly /></p>

    </div>
    <div class="full">
        <p> Amount Total $ <input type="text" name="deduction-total" id="deduction-total" readonly /></p>
        <input class="button form_submit" type="submit" id="submit" value="submit" />
    </div>
    <em><span style="color: #ff0000;"> * </span>required field</em>

</form>
</body>
</html>