JSFiddle - React, Tailwind, and code Playground

by backstabe

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/smoothness/jquery-ui.css">
<a href="#dialog" name="modal">Тарифы</a>

<div id="dialog">
    <table border="0" id="сhannels-table">
        <tbody>
            <tr>
                <td></td>
                <td><strong>Название пакета</strong>

                </td>
                <td><strong>Количество каналов</strong>

                </td>
                <td><strong>Цена в месяц/руб.</strong>

                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="base" value="185" checked disabled />
                </td>
                <td>Базовый</td>
                <td>66 каналов</td>
                <td>185</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="advanced" value="395" />
                </td>
                <td>Расширенный</td>
                <td>97 каналов</td>
                <td>395</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="child" value="45" />
                </td>
                <td>Детский</td>
                <td>9 каналов </td>
                <td>45</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="hd" value="245" />
                </td>
                <td>HD</td>
                <td>23 канала</td>
                <td>245</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="sport" value="45" />
                </td>
                <td>Спорт</td>
                <td>6 каналов</td>
                <td>45</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="music" value="45" />
                </td>
                <td>Музыкальный</td>
                <td>9 каналов </td>
                <td>45</td>
            </tr>
 ...

CSS

table#сhannels-table td {
    text-align:center;
    font-size:14px;
}

JavaScript

(function ($) {
    $(function () {
        jQuery(document).ready(function () {
            // inner variables
            var summa = parseInt($('#сhannels-table input[type="checkbox"][name="base"]').val());

            // inner dialog
            $(function () {
                $("#dialog").dialog({
                    autoOpen: false,
                    draggable: false,
                    height: 320,
                    width: 500,
                    modal: true,
                    resizable: false,
                    title: "Тарифы"

                });
            });

            $('a[name=modal]').click(function () {
                $("#dialog").dialog('open');
            });

            // сhannels logic
            $('#сhannels-table input[type="checkbox"]').each(function () {
                $(this).click(function () {
                    if ($(this).prop('checked')) {
                        summa += parseInt($(this).val());
                        $('#сhannels-table #price-tv').text(summa);
                        $('#сhannels-table input[type="checkbox"][name="base"]').removeAttr("disabled");
                    } else summa -= $(this).val();
                    if (summa !== 0) {
                        $('#сhannels-table #price-tv').text(summa);
                    } else {
                        $('#сhannels-table input[type="checkbox"][name="base"]').attr("disabled", "disabled");
                        $('#сhannels-table input[type="checkbox"][name="base"]').attr("checked", "checked");
                        summa = parseInt($('#сhannels-table input[type="checkbox"][name="base"]').val());
                        $('#сhannels-table #price-tv').text(summa);
                    }
                });
            });
            $('#сhannels-table #price-tv').text(summa);
        });
    });
})(jQuery);